CSS基础混讲（1）

xiaoznz
436 阅读3分钟

今天主要介绍以下CSS的基础，做一个基本知识的混讲。
首先，什么是CSS,它的全名叫做Cascading Style Sheets(层叠样式表),全称CSS(注意，一定要大写)，它是由李爵士的同事Håkon W Lie提出的，这个人也是个牛逼的，这是他的生平。
CSS因为它的不正交性，饱受业内各种大佬的诟病，但是现在，你几乎找不到一款浏览器禁用CSS的，可以说CSS已经是网页开发的标准配置了，所以，我们只能选择不读的练习CSS,这样才能将CSS学习好。CSS本身有很多坑和很多隐藏的技巧，这些我会慢慢通过一次次的整理做出来的。

CSS的选择器

CSS的选择器分为五种：基本选择器，分组选择器，组合选择器,伪类，伪元素分组来讲解：

  • 基本选择器
    • 通用选择器 *
    • 元素选择器 div span
    • 类选择器 .red .div
    • ID选择器 #red #div
    • 属性选择器 input[name="test"] [attr=value]
  • 分组选择器
    • div,span 这种方法将很多有相同CSS样式的分到了一组，方便编写
  • 组合选择器
    • 后代选择器:1.A B 2. A > B
    • 兄弟选择器:1.A~B 2. A + B
    • 列组合器：A || B
  • 伪类，伪元素
    • :hover
    • ::hover 注意，在CSS中，本身是区分大小写的，所以选择器中，一定要按照正确的写

CSS的引入方法

  • CSS的引入主要有三种：行内样式，内联样式，外部样式
    • 行内样式：<div style="color='red'"></div>
    • 内联样式：<style text='text/css'></style>
    • 外部样式：
方法一：
<link rel="stylesheet" type="text/css" href="./xxx.css">
方法二：
<style type="text/css">
	@import url("./xxx.css")
</style>

调试大法

请使用border调试大法，无论遇到什么，直接就用border:1px solid red，直接就能解决很多的问题

文档流Normal Flow

记住一句话，内联元素从左到右，块级元素从上往下
细节上，如果设置了float,position，那么元素就会跳出文档流之中，文档流的规则不再适用。

  • 宽度
    • inline的宽度是由内部的inline元素的和来决定，不能用width指定
    • 块级的高度一般有自动的默认计算长度，但也可以写死宽度
    • inline结合两者的特点，可以指定宽高
  • 高度
    • inline的宽高由line-height和font-size决定，height并不能指定
    • block由内部的文档流高度决定，可以设置height
    • inline-block也是由文档流高度，可以设置height

overflow溢出

当内容的宽度或者高度大于容器设置的大小时，内容就会溢出，此时可以用overflow。

  • overflow可以设置的值
    • auto 当内容多于容器时，显示滚动条，如果没有，就不显示
    • scroll 无论何时都有滚动条
    • hidden 直接隐藏溢出的部分
    • visible 什么都不管，默认值 overflow可以设置只对垂直或者水平，也就是只写overflow-y,overflow-x

盒模型

总共有两种盒模型：1.content-box内容盒2.borber-box边框盒
此时计算两者的宽高的办法是：

content-box width = 内容宽度
border-box width = 内容宽度+padding+border

开发的时候一般用的是border-box

margin合并

  1. 父子合并
css:
.parent{
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
        .son{
            border: 1px solid red;
            width: 50px;
            height: 50px;
            margin-top: 20px;
        }
html:
<div class="parent">
    <div class="son"></div>
</div>

此时可以看到，父元素的margin-top='20px'居然被吞了！ 2. 兄弟合并

css:
.son1{
            margin: 10px;
        }
        .son2{
            margin: 10px;
        }
html:
<div class="son1">你好，我是大毛</div>
    <div class="son2">你好，我是小毛</div>
  • 怎么解决
    • padding/margin
    • overflow:hidden
    • display:flex
    • inline-block 遇到一条条去试就好了，css能做出来就行
avatar
文章
阅读
粉丝