CSS

选择器

基础选择器

选择器名字	示例
标签选择器	`p{color: green;}`
类选择器	`.red {color: red;}`
ID选择器	`#red {color: red;}`
通配符选择器	`* {color: red;}`

复合选择器

逗号 就是选择多个

大于号 就是选择儿子

空格 就是选择孩子

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>复合选择器,后代选择器和子代选择器</title>
        <style>
		 				/* 后代选择器 */
            ol div {
                color: green;
            }

						/* 子代选择器:只能找儿子 */
            ol > div {
                color: red;
            }
        </style>
    </head>

    <body>
        <ol>
            <li>我是ol的儿子</li>
            <li>
                <div>我是ol的孙子 子类选择器找不到我</div>
            </li>
            <div>我是ol的儿子</div>
        </ol>
    </body>

</html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>复合选择器</title>
        <style>
            div, p {
                color: yellow;
            }

            div, p, ul > li {
                color: red;
            }
        </style>
    </head>

    <body>
        <div>熊大</div>
        <p>熊二</p>
        <span>光头强</span>
        <ul class="pig">
            <li>小猪佩奇</li>
            <li>猪爸爸</li>
            <li>猪妈妈</li>
        </ul>
    </body>

</html>

伪类选择器

:link 未被访问的连接
:visited 已经访问的连接
:hover 鼠标放在上面的连接
:active 鼠标按下没有谈起的连接

focus伪类选择器

获取焦点的表单选择器

字体属性

文本属性

盒子模型

边框

还有个表格边框合并的属性:border-collapse:两条边合并成一条边

内边距

内边距也会影响盒子的实际大小
padding 值得顺序是上右下左
没有指定width,加了padding就不会改变盒子宽度

外边距

margin的语法跟padding用法一样

外边距应用-盒子居中

让盒子居中的前提条件是:

盒子必须指定了宽度
盒子左右的外边距都设置为auto

嵌套外边距塌陷

解决方法1: 给父元素定义上边框,坏处就是撑大了盒子
border-top: 1px solid transparent;
解决方法2:指定一个上内边距,坏处就是撑大了盒子
padding: 1px;
解决方法三:为父元素添加 overflow
overflow: hidden;

在浮动,固定,绝对定位的盒子就不会有塌陷问题

元素显示模式

块元素

div ,h1 p ul ol li 一个占一行
高度,宽度,外边距,内边距都可以控制
宽度默认是容器的100%
是一个容器及盒子,里面可以放行内或者块元素
<p>和<h1> 等用于存放文字的标签里面不能放<div>

行内元素

span a strong b em i
一行可以用多个
宽高,设置无效,背景颜色设置有效
默认宽度就是它本身内容的宽度
行内元素只能放文本或者其他行内元素

特殊情况

链接里面不能再放连接,<a>里面可以放块级元素

<input> <img>是行内款,一行可以给多个,也能设置宽高

CSS

CSS

选择器