JS学习记录2

今天学习了伪选择器和盒子模型。

选择器是css中可以用来选择你想要设置样式的标签，有通配符选择器，标签选择器，类选择器，id选择器，行内样式，！important。

css具有三大特性：

1、继承性

父级标签的特性可以被子级继承，但如果子级有自己的样式，就用自己的。

2、层叠性。相同的属性可以被后来的样式设置覆盖；不同的属性可以叠加。

3、优先级。通配符选择器，标签选择器，类选择器，id选择器，行内样式，！important。依次递增。范围越大，优先级越低

伪选择器

伪类选择器：

可以设置鼠标悬浮的文字样式

p:hover{}

.box:hover{}

当鼠标在文字上方悬浮时使用该样式。

超链接的4种状态：

link visited hover active,用于伪类选择器中，注意顺序

伪元素选择器

可以用于标签的前后，创建一个假标签

div：：before(或after){

content：“内容文字”；

}

在div::before 这个选择器里，content 是必须的属性。如果没有content，后面的bgc等属性都不会生效。

结构伪类选择器

在遇到许多列表的时候，可以用以下选择器

li：nth-child（）{

}

括号里输入的是数字，代表第几个列表项目标签会被选择

如果输入2n，则双数序号的列表项目会被选择

如果输入2n-1或者2n+1，则单数序号的列表项目会被选择

如果输入n+5，则从第五项开始，之后的每一项都会被选择，包括第五项

如果输入-n+5,则从第五项开始，之前的每一项都会被选择，包括第五项

盒子模型

盒子模型是对标签进行修饰的一种模型。我们平时在网页中看到的输入框，里面的提示文本并不是紧贴着左边界。网页中有许多超链接，超链接之间也不是完全没有空隙。这些都是盒子模型的用法。

如上图所示，每一个标签都可以看成内容为核心，padding（内衬）包裹着内容，border（边框）包裹着内衬，margin（外边距）包裹着边框。在对标签进行包括bkc等属性的设置的时候，只对padding和内容进行设置，margin默认是空白。

在进行尺寸计算的时候，如果我们已经设置了内容的宽高，再设置padding的话，会导致整个标签膨胀。所以可以通过设置box-sizing属性为border-box来开启自减模式，padding所占空间会自动从内容里扣除。

padding和margin一样都可以在选择器里设置

div{

padding：50px;

margin:50px;

}

还可以单独对一个方向上的padding或者margin进行设置

padding-left：50px;

margin-top：50px;

版心居中

如果希望实现版心居中效果，可以在先设置了标签宽高之后，在设置

margin:0,atuo;

就可以自适应居中啦。

清除默认样式

可以用通配符选择器手动将padding和margin设置为0

并且开启自减模式

*{

padding:0;

margin:0;

box-sizing:border-box;

}

去除li标签的圆点

li{

text-style :none;

}