0907
网页是一个多层的结构,一层叠一层。
通过css可以分别为每一层来设置样式
作为用户来讲只能看到最顶上一层
这些层中,最底下的一层成为文档流,文档流是网页的基础。
对我们来说元素主要有两个状态
元素在文档流中的特点
行内元素
以上两个特点脱离了文档流就会发生变化,具体是啥,不知道。
盒模型、盒子模型、框模型(box model)
边框的大小会影响到整个盒子的大小
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
写法:
border-width: 10px; //可省略不写,不写的话默认值一般是3个像素 border-color: red; //省略不写的使用前景色 border-style: solid; #可以简写 border: 10px red soild ; 这三个没有顺序要求,前后顺序可以随便书写。
border-width默认值一般是3个像素。
border-width可以用来指定四个方向的边框宽度
值的情况:
四个值: 上 右 下 左
三个值: 上 左右 下
两个值:上下 左右
一个值:上下左右
其他值里面牵扯到上下左右的时候,一般也是按照这个规律(顺时针方向)
除了border-width,还有一个border-xxx-width 用来指定某一边的宽度。
border-style 指定边框的样式,值有:
border-style的默认值是 none 表示没有边框。
border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求。
除了border以外还有四个 border-xxx 用来指定某一边的所有属性(颜色,样式,宽度)
可以通过上面,给盒子设置三个边框。但是比较麻烦。还可以写成
border: 10px red soild; border-right: none;
简写属性,可以同时指定四个方向的内边距,规则和border-width 一样
padding:10px 20px 30px 40px; padding:10px 20px 30px; padding:10px 20px; padding:10px;
盒子的可见框的大小,由内容区、内边距和边框共同决定,所以在计算盒子的大小时,需要将这三个区域加到一起计算。
元素在页面中时按照自左向右的顺序排列的,所以默认情况下如果我们设置的左和上外边距则会移动元素自身,而设置下和右会移动其他元素
margin 的简写属性
margin会影响到盒子的实际占用空间
元素的水平方向的布局:
元素在其父元素中的水平方向的位置由以下几个属性共同决定,从左往右分别是
一个元素在其父元素中,水平布局必须满足以下等式:
margin-left + border-left +padding-left + width + padding-right + border-right + margin-right =父元素内容区的宽度(必须满足,没有商量的余地)
以上等式必须满足,如果相加结果等式不成立,则称为过度约束,则等式会自动调整。其调整的规则如下。
如果七个值中没有auto的情况,则浏览器会自动调整margin-right值以使等式成立。(与书写习惯有关系,因为内容是从左往右显示,所以默认改最右边)
以上七个值,有三个可以设置为auto
如果某个值为auto,则会自动调整auto的那个值,以使等式成立。
值的几种情况
如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为 auto的外边距会自动为0
如果三个都设置为auto,则外边距都是0,宽度最大。(也就是说只要是width设置为了auto,那么宽度就是会变成最大值)
如果将两个外边距设置为auto,宽度为固定值,则两个外边距会设置为相同的值,所以我们会经常利用这个特点来使一个元素在其父元素中水平居中
示例:
width:200px;
margin: 0 auto;
子元素是父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出。使用overflow 属性来设置父元素如何处理溢出的子元素
可选值:
垂直外边距的重叠(折叠)
兄弟元素之间的外边距重叠,对于开发是有利的,所以我们不需要进行处理。
display属性可以用来设置元素的显示类型,可选值有:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
table 将元素设置为一个表格。
none 元素不在页面中显示(隐藏一个元素),元素的显示状态还可以用visibility 属性来设置
visibility 用来设置元素的显示状态
写法:
a{ display: inline; }
通常情况,浏览器都会为元素设计一些默认样式
默认样式的存在会影响到页面的布局,通常情况下编写网页时必须对其进行去除(pc端的页面)
可以通过引入外部“默认样式清除表”进行处理
#在 style 标签前面 <link rel="stylesheet" href="./css/normalize.css"
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }