CSS(day02)
1.尺寸属性
注意
max-width:100% 代码元素可以缩放,但是最大宽度不能超过原始尺寸
2.页面中运行设置尺寸的元素
总结: 1.有块级元素都可以设置宽高
2.所有行内块默认自带宽高,也可以设置宽高
3.多数行内元素设置宽高无效
4.属性带有宽高的标签,都可以设置样式的宽高(img,table)
3.溢出的处理
当内容较大,元素区域较小的时候,会发生溢出
默认是纵向溢出
overflow: 取值 1.默认缺省值 visible 溢出部分显示
hidden 溢出部分隐藏
scroll 添加滚动条,不管是否溢出都添加滚动条的槽
auto 自动添加滚动条,不溢出不添加
overflow-x:scroll;单独设置x轴
overflow-y:scroll;单独设置y轴
如何改成横向溢出
在宽度比较小的容器内部,添加一个宽度较大的子元素
附加知识点–
1.颜色的单词
2.#rrggbb 6个16进制 #000000黑色 #ffffff 白色
#ff0000 #00ff00 #0000ff
3.简写方式#aabbcc—>#abc
#f00 #0f0 #00f #ff0 #f0f #0ff
4.rgb(r,g,b)
5.rgba(r,g,b,alpha); alpha:透明度,取值 0~1之间
6.rgb(r%,g%,b%)
7.hsl();
#006699—>rgb(0,102,153)
3.边框
①边框的简写方式
border:width style color;
width:边框的粗细,px为单位的数字
style:边框的样式 solid实线
dotted 点点虚线
dashed 断线虚线
double 双实线
color:边框颜色 transparent等同于 rgba(0,0,0,0)
最简方式:border:style;
border:0;取消边框 (css中,只有数值0,可以省略单位)
②单边定义
只设置某一条边的3个属性
border-方向:width style color;
方向:top/right/bottom/left
③单属性定义
border-style:solid;
border-width:10px;
border-color:#0ff;
④单边单属性定义
border-方向-属性: 一共12个
ex:border-top-color:#f00;
border-bottom-style:solid;
4.倒角,圆角
border-radius: 以px为单位的数字
% 50%就是一个圆
单角设置
border-上下-左右-radius:
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
border-radius:0 取消圆角
5.边框阴影
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow 水平方向的阴影偏移
v-shadow 垂直方向的阴影偏移
blur 阴影模糊距离
spread 阴影大小
color 阴影颜色
最简方式 box-shadow:h-shadow v-shadow;
6.轮廓
边框的边框,绘制于边框外面的线条,不占据元素空间
outline:width style color;
一般情况,我们会把轮廓,清除 outline:0;
———————————————————————————————————————————————
五.框模型----盒子模型(重点☆☆☆☆☆)
框模型—元素在页面上实际占地空间的计算方式(公式)
默认实际占地宽度:
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
默认实际占地高度:
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
外边距margin:边框以外的距离(元素与元素之间的距离)
内边距padding:边框与内容区域之间的距离
1.外边距margin
改变外边距,元素有位移效果,
外边距,由于元素位置的微调,
精确的关注,上外边距和左外边距
①语法
margin:v1; 设置4个方向的外边距
margin-top:
margin-right
margin-bottom
margin-left
取值:距离哪个方向有多远
1.px为单位的数字,
top: + ↓, - ↑
left: + →,- ←
2.% 上右下左,都是父元素宽度的百分比
3.auto, 上下外边距auto无效,auto只对设置了宽度的元素有效
让元素在父元素内,水平居中
②简写方式
margin:v1; 设置4个方向的外边距 margin:auto; 水平居中
margin:v1 v2; v1:上下 v2:左右
margin:0 auto; 水平居中 margin:20px auto;
margin:v1 v2 v3; v1:上 v2:左右 v3:下 margin:10px auto 20px
margin:v1 v2 v3 v4; 上右下左
2.外边距的特殊效果
①外边距合并
两个垂直外边距相遇时,会合并成一个.值以大的为准
解决方案:1.布局设计的时候进行规避
2.只写一个垂直外边距,一下把数值写满
☆☆☆☆☆☆☆☆☆
③默认自带外边距元素
body 8px h1~h6 p ol dl pre
ul 上下16px 左内边距40
④外边距的溢出 在特殊情况下,为子元素添加上外边距,会作用到父元素上 特殊情况:1.父元素没有上边框 2.子元素内容区域的上沿与父元素内容区域的上沿重合 (为第一个子元素设置上外边距时,此说法不严谨) 解决方案: 1.给父元素添加上边框,弊端:增加了父元素实际占地高度 2.给父元素设置上内边距,弊端: 增加了父元素实际占地高度 3.给父元素添加overflow:auto/hidden; 弊端,如果父元素就不能溢出显示 ☆☆☆☆☆ 4.给父元素添加一个大儿子,
,空的table