深入才发现，看似简单的html/css也有很丰富的内容-html4部分

来源：互联网发布：js 点击显示隐藏图片编辑：程序博客网时间：2024/05/19 21:59

《head first html & css》看了这部书，才发现html/css中还有很多内容是我不理解或者不知道的。
1，盒子模型中内边距和外边距都是都是有用的，用的灵活的话对布局会有很大的帮助。这两种边距以前除了强行调整距离之外，并不知道还能干嘛。
2，使用服务器上的Web Font的@font-face规则。
3，针对特定媒体屏幕的中的media属性，或者css规则中的@media，来有选择的使用css样式来显示页面。测试在电脑上浏览器打开和手机上浏览器打开同一个网址http://webler.applinzi.com/css/boxmodel/box.html是怎样的，页面显示不一样，所用页面显示所用样式也不是同一个。还有用电脑浏览器打开http://webler.applinzi.com/css/boxmodel/box.html，但是逐渐缩小浏览器的宽度，看看页面背景颜色变化了。这所有的秘密就全在html link元素的media属性和css中@media规则。
这里写图片描述
4，text-align只对块元素中的内联元素起作用，块元素中的所有内联元素对齐方式发生一致变化，比如居中center。
5，特别要注意嵌套元素的样式属性继承。
6，伪元素与伪类的区别，有点不好理解，可以参考《详解 CSS 属性 - 伪类和伪元素的区别》
7，width设置的是盒子内容区的宽度。
8，浏览器放置两个相邻的内联元素（包括左右相邻和上下相邻）时，两个元素之间的距离则为两个内联元素的外边距之和。
区别于放置两个相邻的块元素，浏览器放置两个相邻的块元素时，两个元素之间的距离则为两个块元素之中的最大外边距。
两个嵌套元素，只要垂直方向的外边距碰到了就会融合，取两个元素中的最大外边距作为嵌套的父元素垂直方向的外边距。如果父元素有边框，父子元素垂直方向的外边距就没有机会碰到融合。
9，当块元素使用float属性向左向右浮动该块元素时，该块元素就会从正常流中删除。原来排在该块元素后面的元素会无视这个块元素，并且跟着该块元素前面的正常元素去排列显示。那么该块元素就会浮动在别的元素的上面，这样会覆盖正常流中的元素。测试去看小demo
10，clear属性设置不允许元素左边或者右边有浮动元素。
11，流动布局，凝胶布局，冻结布局。测试去看小demo
12，定位。绝对布局和浮动一样，是从正常的流中删除并且重新定位，别的元素会完全忽略它。绝对定位的元素和浮动区别的是，别的内联元素会围绕浮动的元素，但是别的内联元素会完全无视绝对定位的元素（也就是不会围绕，正常显示，可能会绝对定位的元素覆盖住其内容区）。测试去看小demo
13，不论是用外边距配合浮动创建多栏布局（浮动布局）或者凝胶布局/冻结布局，还是外边距配合绝对定位创建多栏布局，都是存在缺陷的。更好的创建多栏布局的方式，是使用css比较新的东西—–css表格。当然使用css表格布局也不是最好的。测试去看小demo

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div表示表格</title>    <link rel="stylesheet" href="divtable.css">    <style>        div#tableContainer{            display: table;            border-spacing: 10px;        }        div#tableRow{            display: table-row;        }        #main{            display: table-cell;            vertical-align: top;        }        #sidebar{            display:table-cell;            vertical-align: top;        }    </style></head><body><div id="tableContainer">    <div id="tableRow">        <div id="main">1111111</div>        <div id="sidebar">222222</div>    </div></div></body></html>

0 0