0基础学Web—盒子模型、自带内外边距的标签、圆角边框、继承和权重、边框重叠、弹性布局、背景样式
盒子模型
body代码
<body>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
盒子
<style>
/* top 上 bottom 下 left 左 right 右 */
.first{
width: 200px;
height: 200px;
background-color: #dc7171;
/*
边框: border-方向: 粗细 线类型 颜色
线类型:
solid：实线
dashed:虚线
dotted:点线
*/
border: 5px dashed blueviolet;
/* 内边距:
padding-方向
padding：上 右 下 左
省略的一边和对边一致
*/
padding: 20px;
/* 外边距:margin: 上 右 下 左*/
margin: 20px;
/*
拯救布局
content-box：标准盒模型
元素的宽度 = width(内容) + padding + border + margin
border-box:怪异盒模型
元素的宽度 = width(padding,border,内容) + margin
*/
box-sizing: border-box;
}
.second{
width: 200px;
height: 200px;
background-color: #5b3ab0;
}
</style>
结果展示
自带内外边距的标签
body：自带上下左右外边距 8px
h1 p：自带上下外边距
ul：自带上下外边距 和 左内边距
input：自带四个边框 和 四个内边距
<body>
<div class="wrapper">
<h1>一级标题</h1>
<p>段落</p>
<ul>
<li>111</li>
<li>222</li>
</ul>
<form action="">
<input type="text">
</form>
</div>
</body>
结果展示
圆角边框
body代码
<body>
<div class="wrapper">
<div class="third"></div>
<div class="first"></div>
<div class="second"></div>
</div>
</body>
圆角
<style>
.first {
width: 200px;
height: 200px;
border: 1px solid red;
/* 圆角: 顺时针 */
/* border-radius: 10px 15px 20px; */
/* border-radius: 10px; */
/* 圆形 */
border-radius: 50%;
}
.second {
width: 100px;
height: 200px;
border-radius: 0 100px 100px 0;
background-color: #797474;
}
/* 边框制作三角形 ,transparent透明*/
.third {
width: 0px;
height: 0px;
/* 设置所有框透明 */
border: 100px solid transparent;
/* 留取一边作为三角形 */
border-bottom: 100px solid yellow;
/* 对边设置为none */
border-top: none;
}
</style>
结果
继承和权重
body代码
<body>
<div class="wrapper">
<div class="first">
<ul>
<li class="active" style="color:cadetblue">11111</li>
<li>22222</li>
<li>33333</li>
</ul>
</div>
<div class="outter">
<div class="inner">
<a href="#">教育</a>
</div>
</div>
</div>
</body>
权重
文本样式 和 字体样式，大部分标签可以继承
a标签不能继承字体颜色
选择器权重:
继承、* : 0,0,0,0 0
标签: 0,0,0,1 1
类、伪类、属性: 0,0,1,0 10
id： 0,1,0,0 100
行内: 1,0,0,0 1000
!important： 无穷大
同名选择器: 就近原则
不同名选择器: 按照权重优先级
复合选择器:权重相加
<style>
.outter {
font-size: 50px;
font-weight: 900;
width: 500px;
background-color: #d58d8d;
text-align: center;
line-height: 100px;
color: red;
}
.active {
color: #d58d8d;
}
/* 权重: 10+1 */
ul>.active {
color: blue !important;
}
/* 同名就近原则 */
/* 权重:10 */
.active {
color: #d41313;
}
ul>li:first-of-type {
color: green;
}
</style>
结果
边框重叠
body代码
<body>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<span>你好</span>
<a href="#">百度</a>
<div class="imgs">
<img src="./imgs/renshou-01.png" alt="">
<img src="./imgs/renshou-02.png" alt="">
</div>
</div>
</body>
解决重叠
两个盒子的上下外边距重叠，取较大的值
两个盒子的左右外边距重叠，两个值相加
浏览器会将所有行级元素当做文本处理，中间会有间距
解决图片间距:
浮动可以解决一切间距
margin-left：-1px;
font-size: 0;
<style>
.first,
.second {
width: 200px;
height: 200px;
}
.first {
background-color: #d57474;
/* margin-right: 20px; */
display: inline-block;
}
.second {
background-color: #40c1c3;
/* margin-left: 30px; */
display: inline-block;
}
/* 负外边距 */
/* .imgs>img:last-of-type{
margin-left: -5px;
} */
.imgs {
font-size: 0;
}
</style>
结果
弹性布局
body代码
<body>
<div class="wrapper">
<div class="list">
<div style="background-color: #4dd3a4;"></div>
<div style="background-color: #b9a62c;"></div>
<div style="background-color: #b118b6;"></div>
<div style="background-color: #6d220b;"></div>
<div style="background-color: #61595b;"></div>
</div>
</div>
</body>
单行布局
<style>
.list>div {
width: 200px;
height: 200px;
}
.list {
width: 1100px;
height: 500px;
border: 3px solid black;
/* 父元素设置为弹性容器 */
display: flex;
/* 主轴排列方向 */
/* flex-direction: row; */
/* 水平对齐方式 */
justify-content: space-evenly;
/* 单行垂直对齐方式 */
align-items: center;
}
</style>
结果展示
多行布局
<style>
.list>div {
width: 200px;
height: 200px;
}
.list {
width: 600px;
height: 500px;
border: 3px solid black;
/* 父元素设置为弹性容器 */
display: flex;
/* 主轴排列方向 */
/* flex-direction: row; */
/* 水平对齐方式 */
justify-content: space-evenly;
/* 多行垂直对齐方式 */
align-content: space-evenly;
/* 允许换行 */
flex-wrap: wrap;
}
</style>
结果展示
弹性布局缩放
body代码
<body>
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
</body>
缩放
父元素:
display：flex
flex-direction:排列方向
justify-content: 水平对齐方式
align-items: 单行垂直对齐方式
flex-wrap:wrap 换行
align-content: 多行垂直对齐方式
子元素:
flex:1 优先缩放它
<style>
.wrapper {
width: 400px;
height: 200px;
border: 1px solid red;
/* 弹性容器 */
display: flex;
}
.wrapper>div:first-of-type {
width: 100px;
height: 100%;
background-color: #8d5aaa;
}
.wrapper>div:nth-of-type(2) {
height: 100%;
width: 200px;
background-color: #620303;
/* 优先缩放 */
flex: 1;
}
.wrapper>div:last-of-type {
width: 150px;
height: 100%;
background-color: #a3e628;
}
</style>
背景样式
body代码
<body>
<div class="wrapper">
<div class="first"></div>
</div>
</body>
样式
平铺方式
repeat-x: x轴平铺
repeat-y：y轴平铺
no-repeat:不平铺
背景定位
x: left center right px %
y: top center bottom px %
<style>
.first {
width: 500px;
height: 500px;
/* 背景颜色 */
/* background-color: #deb8b8; */
/* 背景图片 */
/* background-image: url(./imgs/logo_baidu.png); */
/* background-position:90% 100px; */
/* 综合设置 */
background: #deb8b8 url(./imgs/logo_baidu.png) no-repeat 10% 100px;
background-size: 50% 200px;
}
</style>
结果展示
背景尺寸
body代码
<body>
<div class="wrapper">
<div class="first">
</div>
</div>
</body>
尺寸
背景尺寸：
cover:保持宽高比不变充满父元素
auto: 原图，多余的裁减掉
contain: 在父元素范围内保持宽高比不变
<style>
.first {
width: 300px;
height: 200px;
/* 320*240 */
background: #deb8b8 url(./imgs/renshou-03.png) no-repeat;
background-size: 50% 100px;
}
</style>
结果展示
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
