几种引入css的方式
分别有用style 属性、style 标签、css link、css import,
<div style="color:red;">引入css属性</div>
<style> div{color:red;}</style>
<link rel="stylesheet" href="./css/style.css">
@import url("./css/style.css")
在css顶部加入
盒模型
在html标签指定范围通常在css中都是由盒模型构成的,浏览器渲染引擎会根据CSS-Box模型(CSS Basic Box model)将所有元素表示为一个矩形盒子(box)。CSS决定这些盒子的大小,位置以及属性(颜色,背景,边框尺寸...)
内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。
外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin 控制。
margin:10px 20px;
表示上下左右分别是 10px 10px 20px 20pxmargin:10px 20px 30px 40px;
表示上下左右分别是 10px 30px 40px 20px padding同理。postion的一些属性值及其用法
- position: static static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。
- position: relative relative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响。
- position: absolute absolute(绝对定位)是指给元素设置绝对的定位,通过top,bottom,left,right定位,相对定位的对象可以分为两种情况:
i. 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。
ii. 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。 - position: fixed 可以简单说fixed是特殊版的absolute,fixed元素总是相对于body定位的。(可用于固定navbar)
- inherit 继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。
什么是文档流
文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。
网友评论