CSS3
2021-09-29 20:54:37 0 举报AI智能生成
CSS的基础总结很全面，常用的都在里面
作者其他创作
大纲/内容
导入方式：就近原则
行内样式：body里
内部样式head里
外部样式
链接式link
导入式@import url(CSS/style.css)
选择器
基本选择器
id选择器>class选择器>标签选择器
id选择器>class选择器>标签选择器
标签选择器
类选择器： .class的名称{} ，可以复用
Id选择器：#id名称{} ，id唯一不能复用
层次选择器
后代选择器body p
子选择器body>p只有一代
相邻兄弟选择器.m+p向下的一个
通用兄弟选择器.m~p向下的所有同辈
结构伪类选择器
ul的第一个子元素ul li:first-child
ul的最后一个子元素ul li:last-child
定位到父元素，然后选第一个元素，按顺序选p:nth-child(1)
定位到父元素，然后选p元素中的第二个元素，按类型选p:nth-of-type(2)
属性选择器（常用）
字体
font-family:字体样式
font-weight:字体粗细
text-decoration: none取消下划线
text-align: center居中
首行缩进text-indent:1em
line-height行高
文本图片水平对齐vertical-align: middle;
阴影text-shadow:水平距离，竖直距离，模糊半径，颜色
超链接伪类
鼠标悬浮的状态a:hover{}
鼠标按住未释放的状态a:active{}
背景图片:默认都是平铺
background-image:
url("路径");
background-image:
url("路径");
不平铺就一个no-repeat
x轴方向平铺background-repeat: repeat-x;
y轴方向平铺background-repeat: repeat-y;
盒子模型
盒子
外边距margin，整个框居中：margin: 0 auto
边框border，solid实线；dashed虚框
内边距padding
auto×auto=margin + padding + border + 内容宽度
圆角边框border-radius
圆角边框也有四个参数，仍为顺时针顺序
盒子阴影box-shadow
浮动
display
display: inline;行内元素
display: block;块元素
inline-block 既是块元素又有行内元素特性
float上下左右浮动
父级塌陷解决方案
设置父级边框高度足够高
在div里增加一个空的div，清除浮动
clear: both;
clear: right;
clear: both;
clear: right;
overflow
在父级添加一个伪类：after
定位
相对定位relative，仍然在标准文档流里面，基于原来的位置定位
绝对定位absolute，不在标准文档流
基于父级定位
基于浏览器定位
固定定位fixed
z-index
层级0-999，相当于图层概念
0 条评论
下一页
