文章目录
css样式组成组成
Css内容的组成就是selector{property:value},其中selector是选择器,property是属性 value是属性值。
css选择器
css常见选择器
Selector的常见选择器有id选择器 标签选择器 class选择器,其中的表达方式分别为 # ,lable_name和”.”,
和选择器:
选择器之间也可以进行过滤 选择器并 就是能将css style样式作用在多个标签中,只要使用逗号连接标签,就能在多个标签共享css的style。
子代选择器 :
只要使用”>”,就能够选择儿子节点;
后代选择器:
只要使用空格的话就能选择父母节点下的子节点;
后代过滤选择器:
label:nth-chid(index)就能选择第index的节点;
注意一点:
Css冲突状态下css样式的选择遵从从上到下,从外到里。
css设置背景
在css里面如何设置背景,通过url() 指向图片所在的连接 通过 no-repart repart-x repart-y,来控制平铺方向
Css与鼠标动作的交互:
label:link表示普通状态 label:visited表示点击后的反馈css;label:hover:表示鼠标放在该标签上;label:active :表示点击状态下不松开。
Css盒子
css为什么会和盒子联系在一起,很简单因为标准文档流中就是将标签看作一个一个盒子从上到下一个一个排下来的。 一个标签就是一个盒子因此下面有关于这个css的一些盒子解释。
css边距
Css的外边距内边距和边距宽度 分别用三个属性样式来表示。padding内边距 border表示边框 ,外边距则是margin。
盒子溢出
既然是盒子那么要是内容溢出怎么办?这个就需要用到溢出属性设置overflow:auto这个可以对溢出内容进行调整。
盒子移动
既然是是盒子那么肯定可以移动,盒子移动需要用到的属性是float可以设置为left或者是right。这样子的话就会牵扯到标准文档流,标准文档流就是按照标签一行一行排下来。当标签带上了float以后就是相当于摆脱了这个文档流。就相当于移到了二楼。
定位相当于3楼定位分为相对定位和绝对定位。
盒子定位
相对定位
相对定位是相当于标签在原来标准文档流中的位置,即position:relative。
绝对定位
绝对定位是找到最近开启定位的父元素,如果父元素没有开启定位的话,就回去查找上一个元素。