学习来源：B站up主 :罗大富Bigrich
相关视频：【3小时前端入门教程（HTML+CSS+JS）】
网址: https://www.bilibili.com/video/BV1BT4y1W7Aw/?share_source=copy_web&vd_source=9efdad29078e1a84ebec03582c7d2b9f
学习成果：简单了解了盒子模型，网页布局的方式：浮动，定位的优缺点
CSS学习记录：
css三大特性：
1.层叠性：
如果两个相同的选择器之中有样式声明冲突的情况下，后面的选择器的样式会将前面选择器的样式覆盖掉
如果没有冲突样式，则保留不变
2.继承性
父元素的一些样式会同时继承到它的子元素之中，帮助我们避免代码重复
样式的继承只会继承font,text,line开头的样式和color样式
子元素继承的样式权重为0
3.优先级
哪个选择器的权重高就执行那个选择器的样式
通配符选择器，继承样式 0
标签选择器权重 1
类选择器权重 10
id选择器权重 100
内联样式权重 1000
!important 无穷大
复合选择器采用权重叠加的方式1.CSS盒子模型
常用于布局的基本概念，文档中的每个元素都可以被看成是一个矩形的盒子，理解盒子模型是构建网页的基础，更加精确的控制元素在页面的位置和大小
内容区content
内边距 padding
边框 border
外边距margin
1. border边框的样式
border-width 用来调整盒子模型边框线宽
border-style 用来调整边框线条样式
border-color 用来调整边框线条颜色
border-style样式的属性
solid 实线
dashed 虚线
dotted 点线
none 无边框
border复合样式
border:线宽 线条样式 线条颜色;
border-top 上边框
border-right
border-bottom
border-left
边框会影响盒子模型的实际大小
----------------------------------------------------
2. padding内边距
padding-top
padding-right
padding-bottom
padding-left
padding复合样式
padding:20px; 表示上右下左内边距都是此数值的长度
padding:20px 10px; 第一个数值为上下内边距，第二个数值为左右内边距
padding:30px,20px 10px; 第一个数值为上内边距，第二个数值为左右内边距,第三个数值为下内边距
3.marging外边距
盒子模型与其他模型相隔的距离，在盒子模型之外不会影响模型大小
同padding
marging:0 auto 盒子模型居中
1.1 复合样式
border边框的样式:
solid 实线
dashed 虚线
dotted 点线
double 双实线
----------------------------------------------
<head>
<style>
.demo{
background-color:red;
display:inline-block;
border:5px solid yellowgreen;
padding:50px;
margin:40px;
}
</style>
</head>
<body>
<div class="demo"> 一个盒子模型内部内容</div>
</body>
------------------------------------------------
border,padding,margin都是复合样式1.2 复合样式拆分后还是复合样式
border-style,border-width,border-color是复合属性
10px 上下左右四个边框都是10px
10px 0 上下是10px 左右为0
10px 0 20px 上右下
10px 0 20px 30px 上右下左的顺序，顺时针
-----------------------------------------------------------
<head>
<style>
.border-demo{
background-color:red;
border-style:solid;
border-width:10px 0 20px 30px;
border-color:yellow;
border-left:10px solid brown;
}
</style>
</head>
<body>
<div class="border-demo"> 一个盒子模型内部内容</div>
</body>2.传统网页布局方式
：把盒子放到合适的位置即布局完成
2.1 FLEX布局
一维布局
在选择器中使用flex布局
对三个栏的整体布局
.flex-container{
width：100%;
max-width:800px;
min-width:500px; //在屏幕中实现更好的效果，确实很好用！！！
margin:0 auto; //居中显示
display:flex; //实现纵向几栏的布局
//实现盒子的flex布局，在左上左下右上右下，任何空间位置都可以布局
height:800px; //整体布局高度
align-items:flex-center; //竖直方向居中显示盒子 flex-end
justify-content:flex-center; //水平方向居中显示，flex-left
}
对每个栏的单独布局
.flex-item{
padding:10px;
border:1px solid grey;
border-radius:5px;
max-height:500px; //单个显示栏的高度，小于整体的高度，，就可以调整该栏在整体中的位置
flex:2;
}
.flex-item:nth-child(2){
flex:3; //共三栏，第2栏的比例为3，其他为2
}
.flex-item:nth-child(2n+1){
width:200px;
}
2.2 Grid 布局 更加全面更加强大
二维布局
Grid布局
.grid-container{
display:grid;
//设置三列的宽度，以后的盒子自动依据这个布局
grid-template-columns:200px 300px 200px;
grid-template-columns:20% 50% 30%; //百分号布局
grid-template-columns:1fr 2fr 1fr; //特殊单位，表示1:2:1
grid-template-columns:repeat(3,1fr)
grid-template-columns:repeat(auto-fill,20px) //网页自动布局，每个盒子20px,过于灵活
//每行的高度
grid-template-rows:1fr 2fr;
}
.grid-item{
padding:10px;
border:1px solid grey;
border-radius:5px;
max-height:500px;
//可以让网页显示更多的信息
overflow:hidden; //超出范围的自动隐藏，配合上方设置每行的高度。
}3.浮动，不常用
3.1 浮动的三大特性
1.浮动元素会脱离标准流（文档流），浮动元素原来的位置被占用
2.多个盒子设置浮动时，会按照属性值的对齐方向在一行内显示并顶端对齐
3.浮动元素具有块元素的特性，可以设置宽高
- 浮动可以改变元素默认的排列顺序，让网页布局更加灵活多变
- 浮动典型应用让多个块级元素在同一行内排列显示
- 浮动的盒子之间没有缝隙，行内块会有缝隙；
- 浮动先占满一行，然后在占用下一行；
3.2 清除浮动 4种
在网页开发时，常常不能通过限制父元素的高度，从而发生高度塌陷的问题。
双伪元素清除浮动法
<head>
<style>
.clearfix::before,.clearfix::after{
content:'';
display:table;
}
.clearfix{
*zoom:1;
}
.clearfix::after{
clear:both;
}
.box1,.box2{
float:left;
}
</style>
</head>
<body>
<div>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
</body>
-----------------------------------------------
在所有元素的前后都加一个空元素
最后一步清除浮动
在父元素中调用这个选择器clearfix
float:left;浮动4.定位
浮动灵活但是不容易控制，定位布局可以精准定位（某个元素），更加自由，但是缺乏灵活性
4.1 定位语法
定位代码
position:static; 静态定位
position:relative; 相对定位
position:absolute; 绝对定位
position:fixed; 固定定位
position:sticky; 粘性定位
---------------------------------------
1. position:relative;
对标签本身不会有额外的影响，但是可以让内部的标签在定位是作参考！！！
根据该定位元素的原始位置为基准，进行偏移；
相对定位不会脱离文档流，会保留自身的原始位置，不会被别的元素占据自己原来的位置
2. position:absolute;
根据最近一级带有定位的父元素为基准，进行偏移
最近一级没有根据窗口位置进行偏移
绝对定位会脱离文档流，不会保留自身的原始位置
3. position:fixed;
固定定位的元素只会以浏览器视口为基准，无视任何祖先定位
最近一级没有根据窗口位置进行偏移
固定定位会脱离文档流，不会保留自身的原始位置
B站的小窗播放5. 过渡，变换，动画
5.1 过渡
过渡可以使元素在进行变化(尺寸，颜色变化等)时，呈现更加动态的效果
<head>
<style>
*{
margin:0;
padding:0;
}
.transition-box{
width:100px;
height:100px;
background-color:yellow;
/* 过渡，运动时间为1s,从宽100px到宽200px */
/* transition: width 1s,height 2s, background-color 2s; */
/* 同一运动 运动模式：linear匀速运动*/
transition:all 1s linear;
}
/* hover伪类选择器 ：改变鼠标经过时的样式*/
.transition-box:hover{
width:200px;
height:200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class='transition-box'></div>
</body>5.2 变换
*{
margin:0;
padding:0;
}
.transition-box{
width:100px;
height:100px;
background-color:yellow;
/* 过渡，运动时间为1s,从宽100px到宽200px */
/* transition: width 1s,height 2s, background-color 2s; */
/* 同一运动 运动模式：linear匀速运动*/
transition:all 1s linear;
}
/* hover伪类选择器 ：改变鼠标经过时的样式*/
.transition-box:hover{
width:200px;
height:200px;
background-color: aqua;
}
.container{
width:200px;
margin:0 auto;
/* 加上3D效果 */
transform-style:preserve-3d;
perspective:500px;
position:relative;
transition: all 1s;
}
/* 旋转3D */
.container:hover{
transform:rotate3d(0,1,0,180deg);
}
.transform-box{
width:200px;
height:200px;
background-color:green;
transition: all 1s;
/* 移动位置*/
position:absolute;
left:100px;
top:50px;
/* 旋转中心轴 */
transform-origin:right bottom;
}
/* transform包含了已有的位置功能，还有了增强 */
.transform-box:hover{
/* 位移 */
/* transform: translate(100px,20px);
transform:translateX(100px),translateY(20px); */
/* 旋转 */
/* transform: rotate(30deg); */
/* 缩放 */
/* transform: scale(0.5,2); 垂直缩小0.5，水平缩小2 */
/* 变形，倾斜 */
/* transform:skew(10deg); */
/* 位移3D效果 */
/* transform:translate(0,0,100px); */
/* 旋转3D效果 */
transform:rotate3d(1,0,0,100deg);
}
.test-box{
width:200px;
height:200px;
background-color:red;
position:absolute;
transform:translateZ(100px);
}
扫一扫
2600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
