初学css模型

css3盒子模型：边框
border-color
border-top-color 上边框颜色
border-right-color 右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-color： 上下边框颜色：#369
左右边框颜色：#000
下边框颜色：#f00
左边框颜色：#00f
border-width:设置边框的粗细
-top-width:5x; 上
right-width:10px; 右
bottom-width:8px; 下
left-width:22px; 左

border-style:边框的风格
：solid 实线
：dashed 虚线
：double 双实线
:dotted 点线

设计图框的简写：（border: 1px solid red;）

margin:外边距控制距离还是上，右，下 ，左。
1。外边距的妙用：
网页居中对齐的必要条件1.块元素 2固定宽度（有这俩个才能满足网页居中对齐）
网页居中对齐：margin:0px auto;

padding:内边距。 也是上，右，下，左。

盒子模型的的尺寸：盒子模型的总尺寸=border+padding+margin+内容的宽度
box-sizing:border-box 加上他就是设计多大就是多大的盒子

圆角边框：
border-radius:1px 1px 1px 1px 这四个值是设定圆角的弧度的。
利用border-radius属性制作圆形的俩个要点
1.元素的宽度和高度必须相同
2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
半圆形：
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
扇形：
利用border-radius属性制作扇形遵循“三同，以不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同
盒子的阴影语法：
box-shadow: inset 10px 20px 10px red;
(inset设置内层阴影)

网页布局及display属性：
标准文档流组成：1块级元素（block）h1….h6\

\

\列表
内联元素（inline）|\\
内联标签可以包含于块级标签中，称为它的子元素，而反过来则不成立
block 块级元素与行级元素的转变
lnline 块级元素与行级元素的转变
lnline-block 控制块元素排到一行、可以让元素排在一行，并支持宽度和高度，代码实现起来方便。
none 控制元素的显示和隐藏
浮动属性：float:
left(左) 让块元素排在左边
right（右） 让块元素排在右边
float:可以让元素排在一行并且支持宽度跟高度，可以决定排列方向
float度佛那个以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式。

清除浮动：clear：
both 在左、右俩侧不允许浮动元素
1.在块元素（div）要清除父类里面的塌陷空元素要加一个空的