css-03

最新推荐文章于 2022-11-13 09:44:40 发布

小黑不白爱吃糖

最新推荐文章于 2022-11-13 09:44:40 发布

阅读量118

点赞数

分类专栏：查漏补缺文章标签： css

本文链接：https://blog.csdn.net/qq_41860476/article/details/108920151

版权

查漏补缺专栏收录该内容

16 篇文章 0 订阅

订阅专栏

尺寸（dimension）相关属性

height、width、line-height、（max-height、max-width、min-height、min-width）

定位（position）几个值的具体描述

position：static | relative | absolute | fixed | inherit

static:默认值，没有定位，遵循正常的文档流对象；static的元素不受top/bottom/left/right影响

fixed：元素的位置相对于浏览器窗口的固定位置；脱离文档流，不占据空间；fixed定位的元素和其他元素重叠

relative：相对其正常位置；移动relative的元素，原本所占空间不改变；relative定位的元素通常用作absolute定位的容器块

absolute：相对最近已定位的父元素，如果无，相对于<html>；脱离文档流，不占据空间；absolute定位的元素和其他元素重叠

定位相关的属性

position、（top、bottom、left、right）、（overflow、overflow-x、overflow-y）、z-index、clip、cursor、

overflow相关

overflow：visible | hidden | scroll | auto | inherit

【注：overflow属性只工作于指定高度的块元素上】

css布局-水平、垂直对齐

居中对齐

元素居中对齐：width & margin：auto
文本居中对齐：text-align:center;
图片居中对齐：margin：auto & display：block

左右对齐

定位方式：position:absolute & padding & margin
float方式：【注：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。】

垂直居中对齐

使用padding:
使用line-height：height = line-height
使用position和transform：
<style>
.parent { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.child {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
【注：padding和设置line-height方式只对单行文本有效，还未理解】

组合选择符

后代选择器：空格分隔
（直接）子元素选择器：>分隔
兄弟选择器：+分隔
普通兄弟选择器： ~分隔

伪类/伪元素

anchor伪类/伪元素：（a:link、a:visited、a:hover、a:active）
子元素相关：（:first-child、:last-child、:ntn-child(n）、nth-last-child(n)、:only-child）
元素类型相关：（:first-of-type、:last-of-type、nth-of-type、：ntn-last-of-type(n)、：only-of-type）
表单相关：（：checked、：disabled 、:enabled、）
（:in-range、:out-of-range）
（read-only、:read-write）
（:valid、:invalid）
:first-letter：该伪元素只能用于块级元素
:first-line：该伪元素只能用于块级元素
:empty
:not(selector)
:optional
:required
:root
:target
:lang(language)
:focus
:before
:after

伪类和伪元素可以与css类配

伪类：基于元素当前状态或者当前具有的特性->选择元素

伪元素：对元素中的特定内容进行操作

透明度

opacity: 0.0-1.0

IE8和早期版本使用滤镜：alpha（opacity= x） x可以采取的值是从0 - 100

小黑不白爱吃糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-03

尺寸（dimension）相关属性height、width、line-height、（max-height、max-width、min-height、min-width）定位（position）几个值的具体描述position：static | relative | absolute | fixed | inheritstatic:默认值，没有定位，遵循正常的文档流对象；static的元素不受top/bottom/lsft/right影响fixed：元素的位置相对于浏览器窗口的.
复制链接

扫一扫