各种标签属性代表的意义

一、网页布局

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的话，就是最上层。