menu
more_vert
【干货】Html与CSS入门学习笔记9-11

作者:dayu

也可以直接在css中单独指定,@media screen and (max-device-width: 480px){ },在这个大括号里放入针对此媒体的规则。

十、div与span 高级web建设

div划分逻辑区,将一堆相关的块元素放在一起。

子孙选择器: #elixirs h2会选择嵌套的所有h2,不论是直接子孙还是下级的,不用一层层往下写,会自动选择所有的,不管在多少层。

对属性赋值可以有很多简写:font: normal/1.2em bold san-serif; 其中,字体大小/行间距,其他用空格隔开,顺序无所谓。

span划分逻辑区,将一堆相关的内联内容放在一起。<span class="cd"></span>

1、伪类

伪类是直接在元素后面加“:”,例如a:hover,可直接在css中用而不用在html中像类一样定义,因为是浏览器预先设定好的。

a一般顺序是:a:link{} 未访问状态链接

a:visited{}已访问状态链接

a:hover{}鼠标悬停上时状态

还有其他伪类,如first-child对应第一个子元素,last-child最后一个子元素,even(2n)第偶数个子元素,odd(2n+1)第奇数个子元素。

十一、布局与定位 摆放元素

浏览器从html文件最上面开始,从上到下,从左到右,逐个显示遇到的元素,其中每个块元素有一个换行,这就是流flow。所以,块元素是从上到下,内联元素是从左上到右下。

1、浮动float

为元素设置float属性(首先必须为该元素设定宽度width),浏览器会从流中删除这个元素,其他元素继续按照流摆放,当做没有这个浮动的元素,但是后面的块元素的内联元素会绕着这个浮动元素。

为元素设置clear属性,如clear:right;则该元素右边不允许出现浮动元素,如果有就一直往下移,直到右边没有浮动元素。

2、三种布局

流体布局liquid layout,就是通过流,宽度不固定的设计,这样浏览器调整宽度时,元素会跟着扩展,填满浏览器。

冻结布局frozen layout,为整个内容区大div设置宽度,浏览器调整宽度时,内容区不会变,但右边留白会越来越大。

凝胶布局jello layout,为整个内容区大div设置宽度,同时设定margin-left, margin-right: auto;这样浏览器扩展时,内容区会保持大小不变,但始终居中。

3、四种定位position

属性position: static; 静态定位,是默认方式(不设置时),就是将元素放入正常的流中布置。

position: absolute;绝对定位,相对于页面或最近的父元素固定,根据其他left top(可以用像素也可以用百分数)属性确定位置。从流中删除,块元素和内联元素都不知道该元素的存在,内联元素也不会绕着它摆放。

position:relative;相对定位,放入流中,是相对于该元素在流中本来的位置进行的偏移,left top 这些。

position:fixed;固定定位,相对于浏览器窗口固定,不在流中,对块元素和内联元素都没有任何影响。

可以为绝对定位、相对定位和固定定位元素设置z-index属性,值越大,越靠近你,越往上层。

4、利用表格布局

表格单元格内放置的都是块元素。

外框div属性设置为display: table;

行div属性设置为display:table-row;

行内单元格div设置为display:table-cell;

可以在外框div属性设置border-spacing:10px;为每个单元格统一增加10像素的边框间距,则单元格div不用设置margin外边距。另外边框间距会与表格外块元素的外边距相加,不会折叠。

还要在单元格div设置属性vertical-align:top;确保单元格内容相对于上边对齐。

【干货】Html与CSS入门学习笔记9-11

原文地址:http://www.cnblogs.com/ziye89/p/7248765.html