CSS学习笔记（二）

最新推荐文章于 2025-01-24 11:43:12 发布

原创最新推荐文章于 2025-01-24 11:43:12 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析CSS中的各类选择器，包括类、标签、ID及伪类选择器的定义与使用，探讨布局方式如浮动流、标准流及混合流，并介绍盒模型的概念与常见布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器

1、类选择器
定义方式(可以多次调用)
命名：.name{}
调用：<any class="name"></any>
.class命名中不能直接用数字
2、标签选择器
定义方式（只要符合标签，都自动调用）
命名：标签名{} -----------------------------例如p{}
调用：<标签>
3、ID选择器
定义方式（只能调用一次）
命名：#name{}
调用：<any id="name"></any>
4. 伪类选择器
超链接四种状态：
a:link 访问前的状态
a:hover 鼠标悬停时状态
a:active 鼠标点击时的状态
a:visited 访问后的状态
5. 后代选择器
格式：父元素/祖先元素子元素
eg : div a / .nav a

行内元素(内联元素) a span input img label select strong b
块级元素 div p h1~h6 table ul ol dl form pre

display:block; 转换为块级元素（占一行）
display:inline-block; 转换为行内块（宽高起作用）
display:inline; 转换为行内元素（占内容位置）

6、父子选择器

格式：父元素>子元素
eg: .box>a

display：block 显示 display:none 隐藏
visibility:visible; 显示 visibility: hidden;隐藏

display和visibility区别：
display隐藏不占位置,visibility隐藏占位置

盒子模型

在这里插入图片描述

宽度width+padding+border+margin

布局：
1、浮动流
2、标准流 (一般默认为标准流)
3、浮动+标准流＝混合流

top
top-menu
top-language
header
logo
nav
search
banner
content
content-left
content-main
content-right
footer

<div id="top">
    <div class="top-menu"></div>
    <div class="top-language"></div>
</div>
<div id="header">
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="search"></div>
</div>
<div id="banner"></div>
<div id="content">
    <div class="content-left"></div>
    <div class="content-main"></div>
    <div class="content-right"></div>
</div>
<div id="footer"></div>

书写小技巧

为简化代码，常用一些公共样式：

*{
    margin:0;
    padding:0;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}

#header,#banner,#content,#shows,#footer{
    width:	px;
    margin:auto; /*常用来表示居中*/
}

<div class="logo fl"> 		</div>		/*同时调用logo和fl两个样式*/

提高优先级

例如：color:#fff !important;