00.CSS基础知识回顾

作者: Ching_Lee | 来源:发表于2018-01-23 17:00 被阅读0次

1.选择器

元素选择器

标签名 {}
p {}：选中所有的p元素
h1 {}：选中所有的h1元素

id选择器

#id {}
#p1 {}:选中id为p1的元素

类选择器

.class {}
.pclass {}：选中类为pclass的所有元素
结合元素选择器
a.class{}：选中类为class的a元素
多类选择器
.p1.p2{}: 选中类为p1同时为p2的元素

属性选择器
[属性名]选取含有指定属性的元素
[属性名="属性值"]选取含有指定属性值的元素

p[title] {}：选中所有包含title属性的p元素
p[title="hello"]{}：选中所有title属性值是hello的元素

子元素选择器
元素之间的关系
父元素:直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接被祖先元素包含的元素
兄弟元素：拥有相同父元素叫做兄弟元素

父元素>子元素{}

div>span{}：选中div元素中的子元素span，只能是一代父子关系

派生选择器(后代选择器)
祖先元素后代元素 {}

div span{}:选中所有div中的span
#d1 p span{}：选中id为d1的p元素中的所有span元素

相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有相同的父元素。
h1+p{}

<style>
    div+p{
      background-color:blue;
    }
</style>
</head>

<body>
  <div>
      <div>
          <p>品</p>
      </div>
       <p>品</p>
       <p>品</p>
       <p>品</p>
       <p>品</p>
  </div>

</body>

通用兄弟元素选择器
div~p所有的div之后的的兄弟p元素都被选中

<style>
    div~p{
      background-color:blue;
    }
</style>
</head>

<body>
  <div>
      <div>
          <p>品</p>
      </div>
       <p>品</p>
       <p>品</p>
       <p>品</p>
       <p>品</p>
  </div>

</body>

选择器分组(并集)
同时选中多个选择器对应的元素。
选择器1，选择器2，选择器3 {}

#p1,.p2,h1 {}:选中id为p1、类为.p2、元素为h1的所有元素。只需满足一个条件

选择器的优先级
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。
- 优先级的规则：
  内联样式，优先级1000
  id选择器，优先级100
  类和伪类，优先级10
  元素选择器：优先级1
  通配选择器，优先级0
  继承的样式，没有优先级

当选择器中包含多种选择器时，将优先级相加再比较。但是注意，选择器的优先级计算不会超过他的最大数量级。

如果选择器优先级一样，则使用靠后样式。

并集选择器的优先级是单独计算
div,p,#p1,.hello
可以在样式的最后添加一个!important;则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示，但不推荐使用。

2.CSS基本样式

背景
background-attachment：背景图像是否固定或随页面其余部分滚动
background-color:背景颜色
background-image:把图片设置为背景
background-position:设置背景图片的起始位置
background-repeat:设置背景图片是否及如何重复
文本
color:文本颜色
direction:文本方向
line-height:行高
letter-spacing:字符间距
word-spacing:字间距
text-align:对齐方式
text-decoration:文本添加修饰
text-indent:首行缩进
text-transform:元素中字母处理
white-space:元素中空白的处理
字体
font-family：设置字体
font-size:设置字体尺寸呢
font-style:设置字体风格
font-variant:以小型大写字体或正常字体显示文本
font-weight：字体加粗
链接
css链接的四种状态：
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
链接相关设置：
text-decoration:属性大多用于去掉链接中的下划线
background-color:背景颜色
列表 li
list-style：简写列表项
list-style-image:列表项图像
list-style-position:列表标志位置
list-style-type:列表类型
表格
border:1px solid blue 设置外边框
border-collapse:collapse 折叠边框
width、height：设置表格宽高
background-color:设置表格的背景颜色
轮廓
outline:设置轮廓属性
outline-color：设置轮廓颜色
outline-style：设置轮廓样式
outline-width：设置轮廓宽度

3.CSS定位

1）CSS定位属性

position:把元素放在static、relative、absolute、fixed的位置中。

static:没有开启定位，偏移量不起作用，默认是static。
relative：相对定位，相对于元素本身的位置来定位
absolute：绝对定位，相对于position属性除static 之外（相对于第一个开启定位）的第一个父元素进行定位，元素脱离文档流。当所有父元素都没有开启定位时，会相对于浏览器窗口定位。
fixed:固定，不随滚动而改变

top:元素向上的偏移量
left:元素向左的偏移量
right:元素向右的偏移量
bottom:元素向下的偏移量
overflow:设置元素溢出其区域发生的事情
clip:设置元素显示的形状
vertical-align:设置元素垂直对齐方式
z-index：设置元素的堆叠顺序，谁值大谁呈现在前面。

2）CSS浮动

float属性：
left:元素向左浮动
right:元素向右浮动
none:元素不浮动
inherit:从父级继承浮动属性
浮动之后的元素会脱离文档流，不再占有页面的位置
内联元素浮动后变成块元素。
clear属性：用于清除浮动元素对当前元素的影响
去掉浮动属性(包括继承来的属性)
left、right:去掉元素向左、向右浮动
both:左右两侧均去掉浮动
inherit:从父级继承来的clear的值
浮动带来的问题：高度塌陷
当子元素在父元素之中，父元素没有设置高度，那么父元素的高度是由子元素撑开的，这时候子元素浮动脱离文档流，父元素没有内容高度塌陷。

<style>
    #box1{
      border:10px blue solid;
    }
    #box2{
        width:200px;
        height:200px;
        background-color:yellow;
    }
    #bottombox{
       height:200px;
       background-color:red;
    }
</style>
</head>

<body>
<div id="box1">
    <div id="box2"></div>
</div>
<div id="bottombox"></div>

可以看到box1的高度是由其子元素box2撑起来的。

当我们让子元素box2浮动：

#box2{
        width:200px;
        height:200px;
        background-color:yellow;
        float:right;
    }

box1已经没有高度了。

解决方法：
1）IE6之外浏览器
通过overflow:hidden给塌陷的父元素开启BFC
当开启元素的BFC后元素会具有如下特点:

2)IE6不支持BFC模式，利用zoom：1开启hasLayout

<style>
    #box1{
      border:10px blue solid;
      overflow:hidden;
      zoom:1;
    }
    #box2{
        width:200px;
        height:200px;
        background-color:yellow;
        float:right;
        
        
    }
    #bottombox{
       height:200px;
       background-color:red;
    }
</style>
</head>

<body>
<div id="box1">
    <div id="box2"></div>
</div>
    <div id="bottombox"></div>
</body>

3）利用clear属性，为父元素的：after尾元素清除浮动(IE6不支持)

<style>
    #box1{
      border:10px blue solid;
    
    }
    #box2{
        width:200px;
        height:200px;
        background-color:yellow;
        float:right;
        
        
    }
    #bottombox{
       height:200px;
       background-color:red;
    }
    
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .clearfix{
             <!--IE6还是要用zoom -->
      zoom:1;
     }
</style>
</head>

<body>
<div id="box1" class="clearfix">
    <div id="box2"></div>
</div>
    <div id="bottombox"></div>
</body>

4.CSS盒子模型

盒子模型

内边距：
padding:上右下左
padding-left、padding-right、padding-top、padding-bottom
边框：
边框样式：border-style
double:双线 dotted:虚线
单边样式：border-top-style border-left-style border-right-style border-bottom-style
边框宽度：border-width
单边宽度：border-top-width border-left-width border-right-width border-bottom-width
边框颜色：border-color
单边颜色： border-top-color border-left-color border-right-color border-bottom-color
外边距
margin：上右下左
margin-left、margin-right、margin-top、margin-bottom
外边距叠加：
当两个div，一个设置margin-bottom:20px
一个设置margin-top:20px
外边距不是40，而是20。

5.CSS常用操作

对齐操作

1）使用margin属性进行水平对齐

//使div居中
margin-left:auto;
margin-right:auto;
//上面代码等同于
margin:0px auto;

2）使用position属性进行左右对齐

//向右对齐
position:absolute;
right:0px;
//向左对齐
position:absolute;
left：0px;

3）使用float属性进行左右对齐

//向右对齐
float:right;
//向左对齐
float:left;

尺寸操作
width、height。
max-width、max-height。
min-width、min-height。
line-height
显示元素
1）display
inline:将该元素显示为内联元素
block:将该元素显示为块元素
inline-block:将该元素显示为内联块元素
none:此元素不会被显示
2）visibility
设置元素是否可见
hidden
visible
3）visibility:hidden和display:none区别
display:none,元素从页面中移除，不再占据页面中的位置。
visibility:hidden，仅仅隐藏该元素，依然在页面中占据空间。

设置指针类型
cursor：设置鼠标在元素上的样子

网友评论

本文标题：00.CSS基础知识回顾

本文链接：https://www.haomeiwen.com/subject/azijaxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！