CSS day02

尺寸和边框

1.尺寸属性

width:
height:
取值，px为单位的数字
      %
max-width
min-width
max-height
min-height

注意max-width:100%;定义在图片上
图片可以缩放，但是最大不能超过本身原始宽度
PS:附加知识点，尺寸单位
1.px 像素
2.in 英寸 1in=2.54cm
3.pt 磅值 1pt=1/72in 设置字号大小
4.cm
5.mm
6.em 以父元素设置的数值为基本数值(1倍)
7.rem 以html设置的数值为基本数值(1倍)
面试题em和rem 的区别，html如果没有自主的定义尺寸，那么1rem=16px
8.% 以父元素的尺寸为百分比

2.页面中允许设置尺寸的元素

如果元素自带宽高属性，就可以设置css尺寸（img table）
块级元素 行内元素 行内块(input)
可以设置尺寸 设置尺寸无效 可以设置尺寸
不设置宽度，宽度为父元素100%
不设置高，高度靠内容撑开 尺寸靠内容撑开

不设置宽高，浏览器自动给一个尺寸。

不同浏览器给的默认尺寸不同。

3.溢出

内容比较多，容器尺寸比较小，会发生溢出
默认情况下，都是纵向溢出
overflow: visible; 默认值，溢出部分可见
hidden 溢出隐藏
scroll 添加滚动条，就算不溢出，也会保留滚动条的凹槽
auto 自动，不溢出就没有滚动条
overflow-x
overflow-y 单独设置x或者y轴的滚动条
溢出的底层特别复杂，特殊的底层效果导致可以解决css中一些特殊情况
但是这些特殊情况，都明确表明不要用溢出解决
如何设置横向溢出
父元素设置小宽度，子元素设置大宽度
给父元素设置overflow

1.颜色的英文单词 red green blue.....
2.#开头，跟着6位16进制 0~ff
#rrggbb
3.对于#aabbcc这种格式，可以缩写为 #abc #f00 #0f0 #00f #f0f #ff0 #0ff
#000 #fff #ccc #ddd
4.rgb(r,g,b) 十进制 0~255
5.rgba(r,g,b,alpha) alpha:0~1 0全透明，1不透明
6. transparent 透明

4.边框

①边框的简写形式

border:width  style  color;  设置4个方向的边框
width:边框的宽度  
style:边框的样式
     solid 实线
     dashed 短线虚线
     dotted 点点虚线
     double 双实线
color:边框的颜色
border:none/0;  清除边框
最简方式  border:style; 

②单边的设置

border-方向:width  style  color;
border-top:5px solid #f00;
border-right:10px dotted #00f;
border-bottom:5px double #0f0;
border-left:10px dashed #f0f;

③单属性
同时设置4个方向的某一个属性

border-color:#000;
border-width: 20px;
border-style: solid;

④单边单属性设置12个

border-方向-属性：
border-right-color: #00FFFF;
border-top-style:solid;

5.边框的倒角（圆角）

border-radius: 圆的半径;
              px/%       50%就是圆

单角的定义

border-top-left-radius: 20px;   左上角
border-bottom-right-radius: 20px;  右下角
border-top-right-radius: 140px; 右上角
border-bottom-left-radius: 130px;     左下角            

6.边框的阴影

box-shadow:h-shadow  v-shadow  blur  spread  color  inset;
h-shadow  阴影水平偏移距离
v-shadow  阴影垂直偏移距离
blur        阴影的模糊程度
spread     阴影大小
color       阴影颜色
inset       加上inset，内部阴影
            不加inset,外部阴影

7.轮廓
轮廓不占页面空间
绘制在元素边框以外的一圈线条

outline:width style color;
outline:0;

五.框模型-----盒子模型

1. 框模型
   所有元素皆为框
   所有元素在页面上都占据空间，默认情况元素本身的空间，不能被其它元素占据
   盒子模型：元素在页面上占据的空间的计算方式

元素实际占地宽度：左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素实际占地高度：上外边距+上边框+上内边距+内容区域宽度+下内边距+下边框+下外边距
外边距margin:边框以外的区域
内边距padding:边框到内容区域之间的距离
2.margin
外边距在页面中，f12选中时为橘黄色
外边距是透明的没有颜色
①语法

margin：v1;  同时设置4个方向外边距
margin-top:
margin-right
margin-bottom
margin-left

②注意：
1.取值，px为单位的数字
% 是父元素宽度的百分比
auto 上下外边距auto可以设置，但是无效
自动计算左右外边距(元素必须定义了宽度)，
让块级元素在父元素内部水平居中
2.当外边距发生冲突时
左右冲突，以左为准
3.设置元素的外边距，元素会在页面中发生位移效果
4.外边距的颜色是透明的
③简写方式

margin:v1;  同时设置4个方向的外边距  margin:auto;
margin:v1 v2; 上下   左右       margin:0 auto;    margin:20px auto;
margin:v1 v2 v3;  上   左右   下     margin:0px auto 10px;
margin:v1 v2 v3 v4;  上右下左

3.外边距引发的特殊情况
①外边距的合并
当两个垂直外边距相遇时，会合并成一个
最终取值以大的为准
解决方案：1.在一个div中直接把垂直外边距写满
2.在设计的时候规避外边距合并
②块级元素，行内元素，行内块的区别
块级元素 行内元素 行内块
独占一行 与其他行内和行内块共用一行，一行放不下自动换行 与其他行内和行内块共用一行，一行放不下自动换行
设置宽高有效 设置宽高无效 设置宽高有效
不设置宽，宽默认为父元素宽度100%，不设置高，高度默认为内容撑开 宽高都靠内容撑开 不设置宽高，浏览器会给一个默认的宽高。不同浏览器给的默认宽高不同
4个方向外边距有效 左右外边距有效
上下外边距无效 4个方向外边距有效
当一个行内块通过外边距改变垂直的位置时，会带着同一行其它行内块和行内元素一起移动
③自带外边距的元素

body  自带8px,4个方向
ul  上下16px外边距，左内边距40px
h1~h6  p  hr   dl  dd  dt  fieldset  form  legned 

④外边距的溢出
在特殊的情况下，给子元素添加上外边距，会作用到父元素上
特殊的情况：1.父元素没有上边框
2.子元素内容区域的上沿和父元素内容区域的上沿重合
解决方案：1.父元素添加上边框，但是增加了父元素的实际占地高度
2.给父元素添加上内边距，但是增加了父元素的实际占地高度
3.给父元素添加overflow:hidden/auto,但是父元素想要溢出显示，就不行了
4.给父元素添加一个大儿子，空的<table></table>