您的位置：首页 > Web前端 > CSS

css初学备忘

2016-05-03 13:14 441 查看
#test 选择一个id=test的对象

.test选择类名为test的标签

p.test选择所有p标签下面的test类标签

class and id不要用数字开头，firefox不支持

样式的层叠优先级别：由低到高

浏览器缺省设置

外部样式表

内部样式表（位于 <head> 标签内部）

内联样式（在 HTML 元素内部）

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
background-attachment:fixed;
}


可以简写为

body {background:#ffffff url('img_tree.png') no-repeat right top fixed;}


　　

text-align: justify 每一行被展开为宽度相等，左，右外边距是对齐,

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify; margin:30px; }


text-decoration: 去除或者增加文本修饰，比如下划线等

a {text-decoration:none;}


　　

分组选择器 - ul, li {...} 表示将所有的ul和li都设置成如下属性

后代选择器 - ul li {...} 表示将所有ul当中的li都设置成如下属性，不仅仅是一级children，而是各级的children

子代选择器 - ul > li 只选取一级children

相邻选择器 - ul+p 只选择和ul紧挨着的p，两者是平行的共有一个父亲，并且ul和p之间没有任何其他元素

普通相邻选择器 - ul~p 选择和ul平行的所有p元素，中间可以有别的元素。

属性选择器 - [title] 选择所有属性name＝title的元素

　　　　　　- [title="hello"] title=hello的所有元素

　　　　　　- [title~="hello"] title当中包含hello这个单词的所有元素。 "hi helloworld " 不符合规则， “hi hello world”符合。

　　　　　　- [title|="hello"] title当中以hello开头的。 “helloworld”符合。 “worldhello”不符合

　　　　　　- input[type="button"] 所有type＝“button”的input元素集合

CSS 框模型(Box Model)

框模型包括：

margin- 元素针对父元素或相邻元素的坐标；border：元素边框；padding：content针对本元素的坐标；content：内容

当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

下面设置的元素真实宽度是300px

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;


margin 简写的顺序是 top right bottom left

html body的height百分比设置

<!DOCTYPE html>
<html>
<head>
<style>
html {
height:100%;
background-color: red;
}
body {
height:100%;
background-color:green;
border: 5px solid black;
}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>

<body>
<img class="normal" src="logocss.gif"  /><br>
<img class="big" src="logocss.gif"  /><br>
<img class="small" src="logocss.gif" />
</body>
</html>


一个元素的height百分比生生效的前提是，向上追溯它的父节点直到找到一个高度可以确定的，如果中途遇到了auto或者没有这个属性设置，那么height百分比无效。

body的高度默认是不确定的，等于内部元素的布局计算后的高度，他的父元素是html，如果html不设置高度100%，那么body设置的高度百分比是无效的。　　

块和内联元素

display 和visibility的区别。display:none 元素消失，不占用布局。visibility:none元素隐藏，但是占用布局

块元素占用全部宽度，前后都是换行符。div, p, h1, ul li etc

内联元素只占据必要宽度，不强制换行。 a, span etc

可以讲块元素设置为内联属性 p {display: inline}，反之亦然 span {display: block}

display:inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度

Positioning

static:默认方式，没有定位，元素出现在正常的流中。top，left，bottom，right设置无效

fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。{position:fixed; top:20px}

relative：相对定位元素的定位是相对其正常位置，可以理解为先在没有position属性的情况下布局完成并形成元素的空间，然后处理position的位置设置-移动元素，占据的空间大小是不会改变的，变化的只是相对位置。{position:relative; top:-20px;}

absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。和fixed的区别就是当滚动的时候，他会html一起滚动.

z-index属性指定了一个元素的堆叠顺序,具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

溢出overfolow

div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}


如果包含的元素宽高超过了父元素，那么默认会溢出，也就是会超出父元素的显示区域，撑出去显示。

scroll：表示不管是否有超出内容，父元素一定会显示横竖两个滚动条区域，超出部分可以滚动显示

hidden:表示超出部分不会显示。　

auto: 如果不超出不显示滚动条，超出部分会自动显示滚动条

float

元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

img
{
float:right;
}


如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}


元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性，这个之后就没有环绕效果了，除非有新的环绕设定

.text_line
{
clear:both;
}


headerline有一个特殊的地方，就是默认是有margin的，在这个时候，他的容器如果设置背景色，这些margin区域是无法填充的，要在容器css当中设置padding:xpx/xem 才会生效。

块元素默认是占据整行宽度，两边换行的。我目前已知的将块元素放到一行的方法有：

float做环绕

position:absolute

块元素的水平对齐方法：

margin-left， margin-right设置为auto，居中对齐

float， posiition：aboslute左右对齐

　　

　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航