各种标签属性代表的意义
一、网页布局
1.盒子模型div容器
-
padding: 内边距（上，右，下，左px）
-
margin: 外边距 （同上）
写在css中的“*{}”表示整个页面中的所有元素，这个时候可以设置 网页没有边框，代码如下：
如图，网页
浏览器位置居中left:50%; transform:translateX(-50%); margin-top：50%; margin-bottom:50%;
2.flex布局
ps：一定要在flex布局下才有用！ flex布局默认按照行排列
display:flex（开启flex布局）（父元素）
flex-direction: column（默认按照行，可以自己设置按照列）
flex:1 flex:2 flex:1（数据可改，子元素）
1.justify-content:（改主轴）
①flex-end 右
②center 中
③space-between 两端
④space-evenly 平分空间
⑤space-around 周围都有空
2.align-items:（改交叉轴）
①center
②flex-end等等
在你想要设置成flex布局的总的大的div里设置display:flex，然后，那个的div和其包括的各种小的div都可以设置属于flex布局的样式。
css布局（定位）
是通过position实现的：
static,relative,absolute,fixed,sticky.
float：left（左浮动）
其中，position：sticky属性，需要再加一
个top：0
PS：起初并不明白flex布局的意思，后来知道，如果给css中的盒子模型不设置flex（弹性布局），那这个盒子模型是按照它传统的布局方式来布局的，而如果给相应的盒子设置了弹性布局则可以使它有flex属性，才会按弹性盒子布局，但需要注意的是flex自己的标签，诸如justify-content这样的标签需要盒子开启flex布局才有用，如果不写display:flex，那么这些标签将不起任何作用。
另外，float在启用flex布局时将不起作用，至于float:left则为使得新的div紧贴底面父元素div的左边，不会位移。
二、有关hover（它是伪类！！）
我觉得需要注意的地方一共有两点， 做的时候明白了一些东西，如下↓
①如果想设置对于某一个div的hover，那就在":hover "前面加上 “. (div名称)”，
不然就成了给所有div都加上了hover。
②四个伪类的顺序一定不可以变。不然可
能显示不出来
- : link→链接点击前的样式
- : visited→链接浏览过后的样式
- : hover→鼠标悬浮在链接上的样式
- : active→鼠标点击链接时的样式
还可以设置下划线，用text-decoration设置下划线颜色或者none.如下图↓
链接，div变色
还有一个相关的标签：cursor：pointer，如下图↓
小手
三、一些属性
-
text-indent: 文字缩进的样式，可以不用空格
-
font-size: ~px; 字体大小
-
text-align: center 文字在盒子里居中
-
font-weight: 粗体程度
-
border-radius: 圆角属性（使图片变圆形设置>=50%,圆角~px即可）
-
text-shadow: 文字阴影（水平阴影 ，垂直阴影，模糊的距离）
-
box-shadow: 盒子阴影
-
background-image:linear-gradient（渐变方向,color1,color2);
-
line-height: 行高
-
over-flow:hidden 一般给父元素加，防止溢出来，属性本身表示如果内容超出了给定值，超出部分将会被隐藏。
overflow-y: scroll; y轴的滚动轴，如何设置滚动轴样式呢？
补充
觉得在布局时有两个地方比较容易出错，框出来的部分：
这里是多个div的嵌套，其中需要注意必须设置margin-bottom,看起来像是悬浮起来的效果
这里为使美观，设置这些div→float:left.
还有，右边的那些div可以设置line-height行高。
心得体会：
对一些属性标签不太熟练，在做的过程中犯了好多基本错误，觉得难点在于要想好应该怎么布局后再下手，明白所做的东西盒子之间的嵌套关系，比如是哪个大的盒子中有哪些小盒子，是否对div设置flex布局，设置后需要什么属性（靠左/右边/居中），也要计算一些大小防止变形（指超出大的盒子或者其他和希望值不符的样式），就是把一个总的框架搭好，再进行盒子的背景，设置字体大小，阴影，盒子圆角属性等等美化。
①PS：如果要使用一些标签属性的话，一定得在display：flex的flex布局下才有用，不然没用！！！！！
②css的盒子模型，所有东西都是由一个又一个div嵌套而形成的，注意要先设置一个大的div，然后再把里面的东西分成一块一块小的div，再可以设置z-index值把几部分页面叠起来，才把想要显示的内容放在最上层。不然显示不出来。
z-index的值，为负1的话，就是置于底层，为99的话，就是最上层。
网友评论