【图文】第4章CSS盒子模型_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
第4章CSS盒子模型
上传于||文档简介
&&WEB标准下、详述CSS里盒子的概念
大小：1.90MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢503 Service Temporarily Unavailable
503 Service Temporarily Unavailable
openresty/1.9.7.4转载：/hellokitty1/p/3946054.html
1.CSS是成叠样式表（Cascading Style Sheets）的缩写.它用于定义HTML元素的显示形式.2.将CSS引入HTML的方式有三种：&& a.外部样式表：&&&&&& &link rel="stylesheet" href=" "/&&&& b.嵌入样式表：&&&&&& &style type="text/css"&.....&/style&&& c.内联样式表：&&&&&&& 属性名为style 举例:&p style=&&&&/p&3.CSS中的选择器：& A:简单选择器；&&& a:元素选择器；元素 { 属性: 值; }&&& b:类选择器；.类名 { 属性: 值; }& 注意有个点。&&& c:ID选择器；#id名 { 属性: 值;& }& 注意有个#，ID选择器只能被引用一次，而类选择器可以被多次引用。&&& d:伪类选择器；（有四个状态）1、a:link{& } (未访问的链接)&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2. a:visited{& }(已访问的链接)&&&&&&&&&&&&&&&&&&&&&&&&&&&& 3. a:hover{&& }(鼠标在链接上)&&&&&&&&&&&&&&&&&&&&&&&&&&&& 4. a:active{&& }(激活链接)&&& e:伪元素选择器；1,& p:first-line{& }&&&&&&&&&&&&&&&&& 2,&& p:first-letter{&& }4.复合选择器：&&& a:交集选择器：交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。&&&&&& 其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格。&&&&&&&& eg:p.special{&& }&&&&&&&&&&& h3.cls{&&& }&&&&&&&&&&& (以上选择器匹配)&&&&&&&&&&& &p class=&special&&&/p&&&&&&&&&&&& &h3 class=&cls&&&/h3&&&& b:并集选择器：&&&&&&&&&&&&& eg: h1,h2,h3,h4,h5,h6{&&& }&&&&&&&&&&&&&&&&&& h2.special,.special,#one{&&& }&&& c:后代选择器：(继承最近的)后代选择器产生的影响不仅限于元素的"直接后代"，而且会影响到它的"各级后代"&5.理解样式表的层叠:&& 层次的优先级别从小到大依次为：&&&&&&&&&&&&&&&&&&&&&&&&&&& 外部样式表&&&&&&&&&&&&&&&&&&&&&&&&&&&& 嵌入式样式表&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 内联样式& 如果是同一个样式表中不同选择器，优先级别从小到大依次为：&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 元素选择器&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 类别选择器&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ID选择器&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CSS的基本属性---文本样式1.长度单位& 1.px&& 2.em2.颜色定义&& color3.设置字体样式&& 设置文字的字体&& font-family："黑体";&&&&&&&&&&&&&&&& 设置字体倾斜效果& font-style：Italic；&&&&&&&&&&&&&&&& 设置文字加粗效果&& font-weight: （粗体)&& font-weight: (加粗)& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& font-weight:100(范围100-900，数字越大字体越粗)&&&&&&&&&&&&&&&& 设置英文字母大小写转换&& text-transform: (单词首字母大写)&&&&&&&&&&&&&&&& 设置控制文字大小&& font-size:..px/..%/..em&&&&&&&&&&&&&&&& 设置文字的装饰效果&& text-decoration: none/underline/line-through(删除线)/overline(顶线)；4.设置段落样式&& 设置段落首行缩进& text-indent：..em(..个标准字符大小的距离)/..px；&&&&&&&&&&&&&&& 设置字词间距离&&&& letter-spacing(字母):..&&&&&&&&& word-spacing（单词）:..&&& &&&&&&&&&&&&&&&&& 设置段落内部的文字行高&& line-height: &&&&&&&&&&&&&&&& 控制文本的水平位置&& text-align:left/right(右对齐)/center（居中）/justify（两端对齐）&&&&&&&&&&&&&&& 设置文字与背景颜色&& color:...;&&&&&& background-color:...;&&&&&&&&&&&&&&& 设置段落的垂直对齐方式&& vertical-align:...;(只对表格单元格中的元素起作用)&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& css的基本属性---图像样式1.设置图片边框：border-width:(粗细）&&& ;&& border-color:（颜色）&&&& ;& border-style:（线性）&&&& ;&&&& 不同的边框可以设置不同的样式，eg:border-left-style、&&&&& border-top-width&&& ....&& solid实线2.图片的缩放： width&& height& （百分比，像素）3.图文混排：&& 文字环绕：float (浮动)& &&&& 图片与文字对齐方式：水平对齐 text-align:&&&&&&&&&&&& 垂直对齐 vertical-align:4,。设置背景颜色与图像：background-color:&&&&&&&& background-image:url(地址)&&&&& 可以使用background-repeat：来控制平铺，repeat：水平和垂直方向平铺，默认值。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& no-repeat：不平铺。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& repeat-x：只沿水平方向平铺。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& repeat-y：只沿垂直方向平铺。5.设置背景图像位置：background-position：（ 可以设置两个值& eg:left top）6.设置背景图片固定位置& ：background-attchment:&&&&&&&&& 图片滚动： scroll&&&&&&&&&&&&&&&&&&&&&&&&&&& 补充：去掉无序列表前的小圆点，list-style:&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 上标用&sup&&& eg:图像&sup&样&/sup&式&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 定位（查看position7）1.绝对定位：（设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。）&&&&&&&&&&&& position: relative；&&&&&&&&&&&& top:..&&&&&&&&&&&& left:..2.相对定位:& ( 绝对定位的元素的位置相对于最近的已定位的元素，&&&&&&&&&&& 如果元素没有已定位的元素，那么它的位置相对于最初的包含块。)position：&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& top:..&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& left:..&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& css基本属性&表格样式（les8）1.控制表格：cellspacing：列间距&&& cellpadding：列的内边距&&&&&&&&&& border：表格边框&&&&&& bgcolor：表格颜色&&&& border-collapse:合并相邻列的边框线&&&&&&&&&& border-spacing : 设置列的间距&& 设置表格宽度：table-layout:fixed(固定)或者auto(自动)&&&& &thead&：表示表头&&&&&& &tbody&：表示表内容&&&&&&& &tfoot&：表示表尾&& （顺序可以不一样，但一般还是按顺序）2.设置鼠标经过时表格的样式：a:hover3.CSS与表单：a:制作像文字一样的按钮&& transparent(透明的) 设置背景透明&& border:0&&&& eg:&button id="" type="button" style="background:border:0px /none"&......&/button&&&& b:制作多彩下拉菜单&& select& option &&&& c:制作只有下划线的输入框&& border:0px/&&&&&&&&&&&&&&&&&&&&&&&&&&&&& border-bottom:1px (粗细) dashed(线性) #000000(颜色);&&&&&&&&&&&&&&&&&&& 补充：1.display:block(行级元素换成块级元素)/ inline(块级元素换成行级元素)&&&&&&&&&&&&&&&&&&&&&&&& 2.CSS3的选择器：&& :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.&&&&&&&&&&&&&&&&&&&&&&&&&&&& n 可以是数字、关键词或公式。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 用CSS设置链接与导航菜单& （les9）1.设置超链接样式： 在HTML中&a&&&& 在CSS中还可以用伪类选择器的四个样式&&&& a:link(未访问)&&&& a:visited（已访问）。&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& a:hover（鼠标移上去）&&&& a:active（激活）2.创建按钮式超链接：text-decoration:&&&&&&&&&&&&&& a:link{&& }&&&&&&& a:active{&& }& (可以设置这些)&&& background:& ;&&&&&&&&&&&&&&&&&& color:&& ;&&&&&&&&&&&&&&&&&& border-right:& px solid&&& ;&&&&&&&&&&&&&&&&&& border-bottom: px solid&&& ;&&&&&&&&&&&&&&&&&& border-left:&&& px solid&& ;&&&&&&&&&&&&&&&&&& border-top: px&&&& 。3.制作荧光菜单：& 应用无序列表，&div&,a:hover,&&& ( 查& les9)。4.控制鼠标（cursor）指针& . {cursor:& }& （查 属性下的其他 CSS 2.0 中文手册）。5.设置项目列表格式： 可以用有序列表&ol&与无序列表&ul&&&&& 用& list-style&& 来设置。&6.创建简单的导航菜单:& &&&&&& a:垂直排列菜单&&&&& 很多时候会用上& list-style-type:none 其作用是去掉有序或无序列表前的数字或圆点。&&&&& b:横向菜单&&&&& 实现横竖转换只需设置float:left即可，同时把宽度取消掉。7.设置图片翻转效果:(指网页中的一个图片，在鼠标指针经过时换成另外一个图片。)& 可以用hover.&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 补充CSS3的属性& rotate(角度)&&&&&& 效果：当鼠标移上去的时候，列表可以转动你设置的角度。（正为顺时针，负为逆时针，若是180度，可以看见字是倒立的。不能清楚的看见转动&&&&&&&&&&&&&&&&&&&& ，但可以看见字的变化）&&&&&&&&&&&&&&& transform（转换）:rotate（ 旋转；循环 使旋转；使转动；使轮流）(-20deg) ；&&& deg:程度（degree）&&&&&&&&&&&&&&&& （查看les9-5）&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CSS的盒模型& （les 10）1.盒子的概念：在CSS中，一个独立的盒子模型content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成。&&&&&&&&&&&&& 一个盒子实际所占用的宽度或高度是由&内容+内边距+边框+外边距&组成的。2.设置边框，内边距，外边距：&&& a 内边距（padding）& padding属性可以设置1、2、3、4个属性值，分别如下：&&&&&&&&&&&&&&&&&&&&&&& 设置1个属性值时，表示上下左右4个padding均为该值。&&&&&&&&&&&&&&&&&&&&&&& 设置2个属性值时，前者为上下padding的值，后者为左右padding的值。&&&&&&&&&&&&&&&&&&&&&&& 设置3个属性值时，第1个位上padding的值，第2个为左右padding的值，第3个为下padding得值。&&&&&&&&&&&&&&&&&&&&&&& 设置4个属性值时，按照顺时针方向，依次为上、右、下、左padding的值。&& &&&& b& 外边距（margin）&& margin指的是元素与元素之间的距离&&&&&& margin and padding& 的设置时一样的。3.盒子之间的关系：&& &&&&&&&&&&&&&&&&&& 标准的文档流：&&&&&&&&&&&&&&&&&& &div&标记与&span&标记：div简单而言是一个区块容器标记，即&div&与&/div&之间相当于一个容器，&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 可以容纳段落、标题、表格、图片、乃至章节等各种HTML元素。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 二者的区别在于div是块级元素，它包含的元素会自动换行。而span是内嵌元素，不会换行。4.盒子在标准流中的定位原则：&&&&&&&&&&&&&&&&&&&& &&& 行内元素之间的水平margin ：当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。&& 块级元素之间的垂直margin ：当两个块级元素是垂直排列，则情况有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 而是两者中的较大者。&{背景定位：background-position: 为 background-position 属性提供值有很多方法。首先，& 可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，& 不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。)&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CSS盒子的浮动与定位1.盒子的浮动（float）：在标准流中，一个块级元素在水平方向会自动伸展。在垂直方向就不会并排。&&&&&&&&&&&& CSS中有一个float属性，默认为none，float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，&&&&&&&&&&& 使用clear清楚浮动的影响&&&&&&&&&&& clear属性除了可以设置为了left和right之外，还可以设置为both，表示同时清除左右两边的影响。&&&&&&&&&&& position属性可以设置4个值：&&&&&&&&&&&&&&&&&&&&&&&&&&& static：默认值&&&&&&&&&&&&&&&&&&&&&&&&&&& relative：相对定位& （会相对于它原本的位置，通过偏移指定的距离，到达新的位置。不影响其他盒子）&&&&&&&&&&&&&&&&&&&&&&&&&&& absolute：绝对定位（其父元素的相对位置& 其会影响他后面的盒子& 就好像这个盒子被拿走了，&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 其他排在后面的盒子将填补前面的位置。）&&&&&&&&&&&&&&&&&&&&&&&&&&& fixed：固定定位（当滚动条滑动式其不会改变位置，会一直在那里。）2.盒子的定位(static):&&&&&&&&&&& 盒子的定位(relative) &&left、right、top、bottom这四个属性只有当position属性设置为absolute、relative或fixed时才有效。&&&&&&& &3.z-index& ：z-index属性用于调整定位时重叠块的上下位置，z-index值大的元素位于值小的上方。（默认的z-index值为0，当两个块的z-index值一样时，&&&&&&&&&&&&&&&&&&&&&& 将保持原有的高低覆盖关系。）4.盒子的display属性& ：display属性的block和inline两个值，一个代表块级显示，一个代表内嵌显示。display还有个值为none，当设置为none时，&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 表示该元素将被隐藏。此隐藏表示该元素彻底从页面上消失。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 8.281.overflow(溢出)：有四个值：& visible(默认值。不剪切内容也不增加滚动条)& &&&&&&&&&&&&&&&&&&&&&&&&&&&&& hidden （隐藏内容多出的部分）& &&&&&&&&&&&&&&&&&&&&&&&&&&&&& auto (当内容多出框的时候显示出滚动条)&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&& scroll（始终显示滚动条）2.display(显示)：常用的值：& none&& :此元素不会被显示。&&&&&&&&&&&&&&&&&&&&&&&&&&& block& :此元素将显示为块级元素，此元素前后会带有换行符&&&&&&&&&&&&&&&&&&&&&&&&&&& inline& ：此元素会被显示为内联元素，元素前后没有换行符。&&&&&&&&&&&&&&&&&&&&&&&&&&& inline-block& : 行内块元素。3.clip(剪切)：两个值：& auto : 对象无剪切&&&&&&&&&&&&&&&&&&&&&&& rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 其中任一数值都可用auto替换，即此边不剪切 。注意：检索或设置对象的可视区域。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 区域外的部分是透明的。必须将position的值设为absolute，此属性方可使用。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 8.29（复习）1.height：auto&&&&& overflow：hidden&&&&&&& 这是个组合件，其作用是：使自动变到与内部方框（或是最高的那个方框）一样高。必须一起使用。2.定位 （position）&& 这里的left是指：离左边多远。top是指离上边多远。&&&&&&&&&&&&&&& &&&&&& 相对定位：（position：relative；）其参考点是：本身原来位置的左上角。移动后原来的那个位置会被占据。&&&&& 绝对定位：（position：absolute；）其参考点是：其父元素有position的左上角。移动后原来的那个位置会空出来。3.清除（clear）&& 只影响清除的本身。其意思是：想让哪块动，就在哪块上用clear。通常用clear：left；&&& clear：both；&&&&&& &4.display（显示）：&&&&&&&&&& display：none；& 隐藏，空间留给他们用。&&&&&&&&&&&&&&&&&&&&&&&&&&&& visibility：hidden；&& 隐藏，位置空出来，仍在那里。&&&&& display：inline；此元素会被显示为内联元素，元素前后没有换行符。&&&&& display：block； 此元素将显示为块级元素，此元素前后会带有换行符。5.用iframe实现框架结构：&&&&& &iframe& src=&URL&& width=&x&& height=&x& scrolling="[auto|yes|no]"& frameborder="0|1& name="内部框架的名称&&&/iframe&&&&&& &a href="地址" target="内部框架的名称"&文字&/a&6.opacity(不透明)：值为0到1.7.a标签的提交方式默认为get.8.行级元素设置的width，height，是没有用的。
阅读(...) 评论()CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流、盒子模型、浮动、定位，了解了核心内容才能用CSS设计出一个简单的页面
在了解核心内容之前需要先了解HTML中的两种标签：块级元素，行内元素；
块级元素：一个块级元素占满一行
行内元素：在一行中行内元素依次填充
在CSS中可以将行内元素转换为块级元素，通过的是Display属性来实现的
有了以上的基础后再看核心内容
标准流就是在CSS中默认的块级元素和行内元素的排列方法
标准流是默认的排列方法，那么我们也可通过代码来改变它的默认值(即float浮动)
2.盒子模型
基本元素：外边距，内边距，边框，内容四部分
要注意的是：盒子模型针对的是块级元素，某些样式对行内元素无用
#content{ background-color :#eff7 /*背景颜色*/ border:1px solid #428 /*边框*/ width:70 /*宽度*/ height:25 /*高度*/ display: /*转换为块级元素*/ font-size:12 /*字体*/ text-align: /*位置*/ line-height :25 /*高度*/ margin-left:20 /*外左边距*/ color:#0059 /*字体颜色*/ text-decoration: /**/ }
以上是对盒子模型的一些属性的设置
对于设置了浮动的框，那么它就不再属于标准流，所以它的排列方式也会有所不同
通过对文本框的设置浮动，可以排版框的位置，通过设置框向左或向右浮动的位置，直到碰到包含框
或另一个浮动框的边缘为止
#Style｛ float: ｝
以上就是设置框样式的向右浮动
取消浮动可以用Clear来实现
#Style｛ float：Clear； ｝
主要分为两种：绝对定位和相对定位
相对定位脱离了标准流，以他所在标签的第一个标准流父标签为基准
#style { display: position: /*绝对定位，可以放置在页面的任何位置*/ position: /*相对于其原来的位置的移动距离*/ }
还有一种定位方式是固定定位，是相对于其他某一元素来进行定位，应该算是相对定位的一种，都是
其相对位置的改变
以上就是对CSS核心内容的整体的了解，而且这些内容是学习CSS的基础，通过基础的学习，在以后的学
习过程中，遇到问题解决问题，从而获得更大的提高。
学习不是一蹴而就的事情，有了理论的学习，还要进行一些实践，就比如上边写的内容，说起来大家都懂
但是真正做起来就会体现出差距来，所以还是要多动手实践。。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'
