2021/1/28 css

选择器

元素选择器 div{}

id选择器 #id{}

类选择器 .class{}

组合选择器

后代选择器

li a{

}

找到li标签内的所有的a标签

儿子选择器

li>a{

}

只找下一代的选择器

毗邻选择器

li +a {

}

找到紧挨着的选择器

弟弟选择器

.a1~p

找到a1下面所有的p标签

属性选择器

p[title = “p2”] p标签中有p2的标签

伪类选择器

a:link 未点击之前，a:visited以访问的链接，a:hover移动到的链接显示效果.a:active选定的链接

伪元素选择器

div:first-letter{} 选择器内首字母文本信息

before 和 after

选择器的优先级

元素选择器权值1，类选择器10，id选择器100，内联选择器1000

文字属性相关

宽高，只有块级元素才能设置，内联元素必须依赖内联标签中的信息的宽高来设置

font-family 文字类型

font-size：文字大小

font-weight设置字重，normal默认值，bold粗体，bolder更粗，lighter更细，inherit继承父元素字体粗细值，数值为范围（100-900）

颜色 rgba（0，0，0，0）最后一位为透明度

border边框属性

text-a'lign：center居中对齐，right右对齐，left左对齐

a{text-decoration:none} 取消下滑线

p{text-indent:32px} 首行缩进两个字符

背景相关属性

background-color 设置颜色

background-img：背景图片

background-repeat：norepeat 不平铺，repeat-x x轴平铺， repeat-y y轴平铺

background-position:center居中类似九宫格格 left top 左上

输入数据则按照指定数据移动

background-position: 100px 50px

简写方式，以空格中断

background-attachment:fixed; 图片固定死

边框属性

border-style： soid 实线

border-color：颜色

border-radius：圆角 50%是原

Document.body.contentEditable = true 可让网页可以编辑

display：inline 内联模式 block 块级模式 none 隐藏标签

display：none 隐藏后位置消失

visibility：none 隐藏后位置还在

盒子模型

padding：上右下左数值空格隔开；

两个盒子的margin 都有数值，只取其中最大值，

float 浮动（排版重点）

float 浮动起来方便块级元素并排显示

解决浮动父级塌陷的方法，

将父级标签的宽度或者高度进行设置

主流方法，清除浮动

clear：both 清除浮动

clear：left 清除左浮动

clear：right 清除右浮动

.clearfix:after{

　　content:"";

　　display:block;

　　clear:both

　　}

溢出

overflow：hidden内容会被裁剪

overflow: scroll 生成一个滚轮来展示剩余内容

定位

圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /*切割*/
            overflow: hidden;
        }
        .d1 img{
            /*自适应*/
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="d1">
        <img src="1.png" alt=""/>
    </div>
</body>
</html>

定位

position定位脱离文档流操作，类似于浮动

relative相对定位，相对移动，相对于自己原来的位置

top，left，right，bottom 控制，是距离原来位置，原来的空间还存在，（方向是完全相反的）。

absolute绝对定位，

按照整个文档进行定位，

如果父级级祖籍标签没有相对定位属性，就会按照整个HTML文档进行移动

如果父级标签引入了相对定位，绝对定位的子元素会一直跟随相对移动的父级元素进行移动

固定定位 fixed 始终在视图位置

z-index 层叠图层数值越大越在上层

模态对话框

通过固定定位，还有透明度来实现

opicaty 也是设置透明度，范围为0~1

posted @ 2021-01-28 19:28 ping_sen 阅读(60) 评论(0) 收藏举报

刷新页面返回顶部

ping_sen

2021/1/28 css

公告