CSS学习笔记03

13、简单布局

1、水平方向的布局
一个元素在父元素中的水平位置由以下几个决定分别是：
margin-left：左外边距
border-left：左边框
padding-left：左内边距
width：宽度
padding-right右内边距
border-right：右边框
margin-right：右外边距
不指定元素的宽度时：width默认为100%，撑开内容,当等式不满足是调整右边距，有auto时调整auto

水平居中：width固定，margin：0 auto

2、垂直方向的布局
父元素高度不固定，子元素内容默认撑开，如父元素固定，子元素超过父元素，就会溢出
溢出处理：
overflow-x:
overflow-y
可选值：visible(默认),hidden,stroll,auto

在父元素中设定：overflow:auto即可解决溢出，出现滑动框，

3、外边距重叠问题

水平方向元素不会出现外边距重叠问题
垂直方向会出现外边距重叠问题

兄弟元素之间的重叠：都是负值选绝对值较 大的，一正一负取和，两个正值取大的
父子元素margin会传递，解决办法：父元素加padding-top或border

14、块元素和行内元素转换

属性：display
display：inline 行内元素
display：block 块元素
display：inline-block行内块元素
display：table表格元素
display：none隐藏元素（不占位置）

visibility:visible可见
visibility:hidden 隐藏元素（占位置）

15、盒子的大小和默认样式

盒子默认大小
属性：box-sizing
box-sizing:content-box(默认content大小)
box-sizing:border-box以边框大小作为盒子大小

默认样式
html默认给标签都加上了样式
重置样式：
清除全部：下载reset.css文件，引入即可下载reset.css
默认统一化样式：下载 normalize.css,引入即可normalize.css
注：reset是去除所有杨思，normalize对默认样式进行统一

16、轮廓和圆角(不会影响布局)

轮廓
outline:用法和border一样
阴影
box-shadow:10px(水平偏移量) 10px（垂直偏移量） 10px（模糊半径） black（颜色）
圆角
border-radius：10px（四个角曲线半径10px） 50%(圆形):简写形式
border-XX-radius
xx可选值:top-left、top-right、bottom-left、bottom-right

<h1>outline-style 属性</h1>

<p class="dotted">点状轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓。效果取决于 outline-color 值。</p>
<p class="ridge">凸脊轮廓。效果取决于 outline-color 值。</p>
<p class="inset">凹边轮廓。效果取决于 outline-color 值。</p>
<p class="outset">凸边轮廓。效果取决于 outline-color 值。</p>

p {outline-color:red;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}