盒子模型
Margin:外边距
Margin-top、margin-right、margin-bottom、margin-left
使用方式
(1) margin:30px;表示上下左右外边距都为30px
(2) margin-left:30px:单独设置上下左右外边距
(3) margin:10px、20px、30px、40px、:分别设置上下左右四个边距为10px、20px、30px、40px
padding:内边距
也有上下左右边距,和margin类似。
Border:边框
/*border:10px dashedblack;*/
border-width: 10px; 边框的宽度
border-style: dashed; 边框线条类型
border-color: black; 边框的颜色
Word中设置边框的操作
可以更优化的书写方式
border:10px dashed black;
outline: 10px dotted greenyellow;
outline:轮廓线,用法同border
定位方式有:static、fixed、relative、absolute
Static 静态定位(默认)
定位相关属性
(1) 文档流:就是HTML的布局机制,块元素(block)独占一行,内联元素(inline)不独占一行,
(2) 相对定位:就是相对于一个东西来定位。这个东西就是他本身。同时可以使用left、top、right来移动元素位置
相对定位不会脱离文本流
(3) 绝对定位:找一个东西相对来绝对定位。这个东西有时是什么呢?这这个东西(element)必须设定posintion,并且定位方式非static。
这个小鬼定位(element)定位可以是他爸爸、他爷爷、他外公。。。。。。。。。。。(祖宗 body)中有钱的(position:absolute)的或者当官的(posintion:reltive,fixed)就是不能是程序员(position:station 或直接没有定位)
注意:绝对定位脱离文档流。一般使用“父相子绝”。
使用绝对定位设置top:0和不设置top:0属性他们有区别吗?
有区别,如果没有设置top属性,元素的位置和没有脱离文档流的位置一样
(4) fixed定位:就是相对于浏览器窗口的定位
(5) 使用了postion属性,一般不使用margin,padding属性。
选则器,指的是选择施加样式目标的方式。
元素选择器
用标签名作为选择器,选中所有相应的元素
<style type="text/css">
p{
font-size:24px;
color:red;
}
div{
font-size:32px;
color:blue;
}
</style>