CSS 第二阶段 第三天学习笔记

四、尺寸

1.尺寸

改变元素在页面上的宽度和高度

宽度 width

高度 height 如果想使用%必须要求父元素有固定高度

取值：以px为单位的数字

      %相对于父级的尺寸百分比

特殊 父级如果是body，高度百分比失效，宽度可以用%

max-width 最大宽度

min-width 最小宽度

max-height 最大高度

min-height 最小高度

如果非要测试最小值>最大值

最终结果 最小值为准

2.绝度值单位

（1）px像素

（2）in英寸 1in=2.54cm

（3）pt磅值 1pt=1/72in

（4）cm厘米

（5）mm毫米

（6）%一般是某个属性的百分比

（7）em以父级元素设置值得倍数 1.5em

（8）rem以html元素设置值得倍数 1.33rem

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

（1）块级元素

可以设置宽高 div p

默认宽：父元素宽度的100%

默认高：靠内容撑开，没有内容高度为0

（2）行内元素

设置宽高无效 span

默认宽/高，都是被内容撑开，没有内容就没有宽高

（3）行内块

可以设置宽高 img

默认浏览器会自动给宽/高，但是，不同的浏览器给的宽/高不一样

 

当内容较大，元素区域较小，就会发生溢出效果

默认情况下都是纵向溢出

overflow:visible; 溢出部分显示，默认值

overflow:hidden;溢出部分隐藏

overflow:scroll; 带滚动条，不管是否溢出，都添加x/y轴的滚动条

 

overflow:auto; 自动， 不溢出就没有滚动条，溢出自动在溢出方向添加滚动条

 

overflow-x:scroll; 单独让x轴出现滚动条

overflow-y:scroll; 单独让y轴出现滚动条

五、颜色表示法

1.常用颜色表示法

（1）颜色的英文单词 red blue green yellow....

（2）#rrggbb 6位16进制 0~255 0~FF

（3）#aabbcc -> #abc （可以简写为）

（4）rgb(0~255,0~255,0~255)

（5）rgba(r,g,b,a) alpha透明度 0~1 0全透明 1不透明

（6）transparent 透明 相当于 rgba(0,0,0,0)

2.不常用的颜色取值

（1）rgb(r%,g%,b%) 255百分比

（2）hsl(h,s,l)色段 饱和度 亮度

 

六、边框

1.边框

同时设置4个方向的边框

0.border: width style color;

width- - - - 边框的粗细

style - - - -边框样式    

（1）style - - - -边框样式  

①solid 实线

②dotted 小圆点

③dashed 短线虚线

④doubel 双实线

 

（2）color - - - -合法颜色，边框颜色   

通常用 6位16进制码或简写为3位16进制码

红色  FF    00     00

绿色  00    FF     00

蓝色  00    00     FF

transparent透明

（3）取消边框 border:none / 0 ;  

清除4个方向的边框

最简方式 border: style; border:solid;

2.单边的定义

（1）只设置一条边的3个属性

①顶部边框实线 border-top

border-top: 2px solid #F00;

②右侧边框短线虚线border-right

border-right: 5px dashed #00F;

③底部边框小圆点虚线 border-bottom

border-bottom: 3px dotted #F0F;

④左侧边框双实线 border-left

border-left: 4px double #0FF;    

（2）取消某个边框

①border-top: 0;

②border-right: 0;

③border-bottom: 0;

④border-left:0;

 

 

3.边框的单属性

（1）border-width: 100px;  单独设置宽

（2）border-style: solid; 单独设置样式

（3）border-color: #CCFF00;  单独设置颜色

简化格式

border: 样式

 

4.单边单属性

border-top-width:  上边框宽度

border-top-style:  上边框样式

border-top-color:  上边框颜色

border-right-width:

border-right-style:

border-right-color:

border-bottom-width:

border-bottom-style:

border-bottom-color:

border-left-width:

border-left-style:

border-left-color:

 

5.倒角/圆角

（1）把直角倒成圆角

border-radius:圆角的半径

取值：1.px为单位的数字 ，会保留较长的直线边框

  2.%  50%就是圆 ，会将所有边线进行弯曲

 

 

单角的定义，圆角之间会相互影响

①border-top-right-radius: 值;

②border-top-left-radius: 值;

③border-bottom-right-radius: 值;

④border-bottom-left-radius: 值;

 

 

6.边框阴影

（阴影的调整不会影响边框）

box-shadow: h-shadow v-shadow blur spread color;

（1）h-shadow x轴偏移量

（2）v-shadow y轴偏移量

（3）blur 阴影模糊程度

（4）spread 阴影大小

（5）color 阴影颜色

 

（6）inset 内部阴影

 

最简写法

box-shadow: h-shadow v-shadow; (只用x和y也可以调阴影)

7.轮廓outline:width style color;

 多用于修饰文本框和按钮

绘制在边框外边的一圈线，不占用网页的空间

  一般我们会把轮廓清除掉

outline:width style color;

outline:0; /outline: none;

outline-width:20px;

outline-style:dotted;

outline-color:#F00;

轮廓没有单边的定义

 

七、框模型（盒子模式）☆重点

所有元素都有框------所有元素在页面上都占据空间

 

默认盒子模型计算公式：
元素占地宽度：
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素占地高度：
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

 

1.margin 外边距

边框外的距离（元素与元素之间的距离）

 

优先满足上外边距和左外边距的值保持正确，确定了位置，

下外边距和右外边距通常无法固定

（1）语法

margin：v1； 同时设置4个方向外边距

①margin-top:

②margin-right:

③margin-bottom:

④margin-left:

（2）取值：

①以px为单位的数字

左外边距 ++ 向右移动 → -- 向左移动 ←
上外边距 ++ 向下移动 ↓ -- 向上移动 ↑

②%是元素宽度的百分比，跟父元素的高度没有关系

③auto设置auto 对上下边距无效

效果，让块级元素在父元素中水平居中

对行内元素和行内块元素无效

值对设置了宽度的块级元素有效

 

（3）简写方式     

①margin: v1;  

同时设置4个方向外边距

②margin: v1 v2;  

v1为上下 v2为左右

③margin:v1 v2 v3;

v1上 v2左右 v3下

④margin:v1 v2 v3 v4;

上 右 下 左

2.外边距的特殊情况

（1）外边距合并

两个垂直的外边距相遇时，会发生外边距合并

最后的值，以大的为准

解决方案：

①两个垂直相遇的外边距，只设置其中一个

②页面设计的时候避免如下问题