css层叠样式表

最新推荐文章于 2024-04-20 12:19:34 发布

那个小屋

最新推荐文章于 2024-04-20 12:19:34 发布

阅读量137

点赞数

分类专栏：从零开始的前端程序员文章标签： css

本文链接：https://blog.csdn.net/qq_36634628/article/details/107145542

版权

从零开始的前端程序员专栏收录该内容

32 篇文章 0 订阅

订阅专栏

css层叠样式表

引入方式及其权重：行间样式(1000)>内嵌式样式>外联样式

选择器及其权重(权重是256进制）

!important(Infinity)>ID选择器(100)>class选择器(10)>标签选择器(1)>通配符选择器(0)
属性选择器=class选择器=伪类选择器
父子选择器 div span {};
直接子元素选择器 div > span {};
并列选择器 div.demo {};
分组选择器 div,
span {};
伪类选择器 a:hover {}; //鼠标移上选中

属性

字体属性
字体大小：font-size: 16px;
字体粗细：font-weight: bold;
字体样式：font-style: italic;
字体类型：font-family: ‘宋体’;
字体颜色：color：red;

文本属性
文本对齐：text-align: center;
强制文本不换行：white-space: nowrap;
同行文本中轴线： vertical-align: 20px;/middle;
//单行文本所占高度等于容器高度，文本会垂直居中于容器中
文本行高：line-height: 100px;
//em相对于父级元素font-size rem相对于根元素font-size
文本首行缩进： text-indent: 2em;
文本下划线：text-decoration: underline;
鼠标光标属性 cursor: pointer; //鼠标移上变小手

边框属性
border: 1px solid #000;
圆角属性：border-radius: 50%;
用边框属性画三角形、梯形
div {width: 0px; height: 0px; border: 100px solid #000;
border-left-color: red;}
透明色 color：transparent；

盒子模型

标准盒模型

定位属性

//absolute脱离原来位置，相对于最近的有定位的父级进行定位,如果没有相对文档
//relative保留原位置，相对于原来位置进行定位
//一般用relative当参照物，用absolute定位
//fixed固定定位，相对于浏览器窗口定位
position: absolute;/relative;/fixed;
定位元素层级属性：z-index: 1;

水平垂直居中

    <style>
        div {
            position: absolute;
            left: 50%;
            top: 50%; 
            width: 100px;
            height: 120px;
            background: red;
            margin-left: -50px;
            margin-top: -60px;
        }
    </style>

两栏布局

<div class='right'></div>
<div class='right'></div>
<style>
    .right {
        position: absolute;
        right: 0;
        width: 100px;
        height: 100px;
        background-color: #fcc;
        opacity: 0.5;
    }

    .left {
        margin-right: 100px;
        height: 100px;
        background-color: #123;
    }
</style>

BFC块级格式化上下文

以下条件可以触发一个盒子的BFC
position:absolute;
display: inline-block;
float: left;/right;
overflow:hidden;

margin塌陷解决方案
以上触发条件之一
margin合并解决方案
下方元素的margin重新计算加上上方的元素的margin

浮动属性 float: left;/right;
浮动元素产生浮动流，块级元素看不到他们
BFC元素和文本类元素及文本都能看到浮动元素

浮动塌陷解决方案
清除浮动流 clear: both; 能清除浮动的只能是块级元素
给父级元素添加伪类属性
.clear::after{content:’’; clear:both; display:block;}
3.让父级元素触发BFC

伪元素
伪元素天生存在每个元素内（before和after）且是行级元素
可以通过CSS伪类选择器选中
div::before{}; div::after{};

单行溢出文本打点
三件套:强制文字不换行；溢出部分隐藏；文本溢出隐藏部分打点
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

背景属性
background-image: url( );
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: 100px 100px;/left center;

当css未加载文字代替图片（仅设置背景图片时）
方案一：文字缩进到容器外部；强制文字不换行；溢出隐藏；
text-indent: 100em; white-space: nowrap; overflow: hidden;
方案二：用padding-top代替原本的高度;
背景图片会填充到padding上，文字会溢出隐藏
height: 0; padding-top: 100px; overflow: hidden;