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

九、盒模型 与元素亲密接触

1、盒模型

css将每个元素都看做一个盒子，包括以下属性：

内容区content area：包含内容，内容可以决定大小，也可以自行设定宽度和高度。元素的width属性指定的就是内容区宽度，可以按像素指定也可以按百分比相对于元素所在容器如body div 的大小来指定。

内边距padding：内容区外的透明区域，可以看做元素的一部分，对元素设定背景会延伸到内边距。

边框border：内边距周围的边框。

外边距margin：边框外的透明区域，提供元素与元素之间的间隔，元素背景不会延伸到外边距。元素的（内联，如图像）左右外边距会相加，（块元素）上下外边距会折叠，取最大的，嵌套也是如此。另外，浮动元素的外边距与正常流中的外边距不会折叠。

2、其他

背景图像属性background-image: url(images/background.gif)

背景图像位置background-position：top left 可以按像素、百分数和关键字指定，这个就是左上角的意思

背景图像重复background-repeat:有repeat 在水平和垂直方向重复，默认。no-repeat不重复，只显示一次。repeat-x在水平方向上重复。repeat-y在垂直方向上重复。inherit继承父元素设定。

边框除了border-syle border-width border-color还可以设定圆角，border-radius:15px;或3em;可以用像素也可以用比例（相对元素字体大小）来指定圆角半径大小。也可指定一边圆角，border-top-left-radius:3em;左上圆角。

id属性：在html中加入<p id="footer">  </p>，在css中设定样式，#footer{color:red;}或p#footer{color:red;}（类是用“.”）

多个样式表：加入多个link，最下面的最优先。

样式表针对媒体类型：浏览器会通过媒体类型来确定使用的规则，不匹配的忽略。

在link中增加一个media属性，<link rel="stylesheet" href="loung-mobile.css" media="screen and (max-device-width: 480px)">，针对有屏幕且屏幕宽度不超过480px。

也可以直接在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最后一个子元素，nth-child(even/2n)第偶数个子元素，nth-child(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;确保单元格内容相对于上边对齐。