问风博客

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。块元素块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h~h、dl、dt、dd等等都是块元素，它在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽度为父级宽度%盒子占据一行、即使设置了宽度内联元素内联元素，也可以称为行内元素，布局中常用的标签如：a、span

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。overflow的设置项：、visible默认值。内容不会被修剪，会呈现在元素框之外。、hidden内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。、scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。、auto如果内容被

盒子的真实尺寸计算公式如下：盒子宽度=width+padding左+padding右+border左+border右盒子高度=height+padding上+padding下+border上+border下.box{width:px;height:px;background-color:gold;}.box{width:px;height:px;background-color:gold;bord

盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：、盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin).box{/*设置宽高、背景色*/width:px

、标签选择器标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。*{margin:;padding:}div{color:red}<div>....</div><!--对应以上两条样式--><divclass="box">....</div><!--对应以上两条样式-->、id选择器通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名

css颜色值主要有三种表示方法：、颜色名表示，比如：red红色，gold金色、rgb表示，比如：rgb(,,)表示红色、进制数值表示，比如：#ff表示红色，这种可以简写成#f

常用的应用文本的css样式：color设置文字的颜色，如：color:red;font-size设置文字的大小，如：font-size:px;font-family设置文字的字体，如：font-family:'微软雅黑';font-style设置字体是否倾斜，如：font-style:'normal';设置不倾斜，font-style:'italic';设置文字倾斜font-weight设置文字是

CSS的定义方法是：选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。CSS的页面引入方法：、外联式：通过link标签，链接到外部样式表到页面中<linkrel="stylesheet"href="css/index.css">#index.cssdiv{font-size:px;color:red;}、嵌入式：通过st

布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：、table布局通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。、HTML+CSS布局(DIV+CSS)主要通过CSS样式设置来布局文字或图片等