CSS小总结

样式设置大概几样考虑

宽高 浮动 居中 颜色 背景 文字 边框边距

1.列出几种隐藏元素的方法？

  • visibility：hidden (这个属性 的另一个值是visible) 隐藏后，保留原有位置
  • opacity: 0 （完全透明）
  • display: none；（删除原有位置）
  • height: 0; overflow: hidden

2.网页布局的方式

  • 固定宽度布局，为网页设置固定的宽度
  • 流式布局，为网页设置一个相对的宽度，通常以百分比作为单位
  • 栅格化布局，将网页宽度等分，布局时设置元素占几等分（还是百分比）
  • 响应式布局，检测设备信息，决定网页布局方式，一个网页适配多种屏幕，在不同分辨率的终端上不同展示方式
    注意： 以上布局方式并非独立存在的，实际开发过程中往往结合使用

3.元素的高度属性

  • offsetWidth = 内容宽度 + padding + border
  • clientWidth = 内容宽度 + padding
  • scrollTop = 被卷出去的上侧距离
  • scrollHeight = 自身实际高度，不含边框

4.em和rem

em参照当前元素的字号，没有就参照父元素，都没有就参照浏览器
rem参照根元素的字号，即html的字号（未设置就是参照浏览器）

	<style>
		body {
			margin: 0;
			padding: 0;
		}

		@media screen and (device-width: 320px) {
			html {
				font-size: 16px;
			}
		}
		@media screen and (device-width: 360px) {
			html {
				font-size: 18px;
			}
		}

		.box {
			background-color: red;
			width: 10rem;
			height: 10rem;
		}
	</style>
</head>
<body>
	<!-- 根据ui稿件的宽度和手机屏幕的宽度，做等分，比如ui图640px,手机屏幕320px,都分为20分，那么手机中一份为16px,代码中将html字号设置为16px，元素占几分，就设置为几rem,如果手机屏幕宽度是360px，字号就设置为18px，依此类推 -->
	<div class="box"></div>
</body>

5.less文件的直接使用和引入其他less文件

    <!--直接引入less文件-->
    <link rel="stylesheet/less" href="./css/index.less">
    <!--引入能够解析less文件的js插件-->
    <script src="./js/less.js"></script>
    <title>优惠活动</title>

/*引入其它的less文件*/
@import 'base.less';
/*引入字体文件*/
@import 'fonts.less';
/*引入屏幕适配文件*/
@import 'adapter.less';

6.块级元素，行内元素，行内块元素

块级元素：

  • 独占一行
  • 可设宽高，内外边距
  • 宽度默认容器100%
  • 可以容纳行内元素和其他块级元素
    行内元素：
  • 不独占一行
  • 高宽无效，水平内外边距可设，垂直无效
  • 默认宽度是本身内容宽度
  • 行内元素只能容纳其行内元素和文本（a除外）
    行内块元素：
  • 不独占一行
  • 可设宽高，内外边距
  • 默认宽度是本身内容宽度

7.样式的参照物

宽高：参照父元素宽高
内外边距： 参照父元素宽度

定位：父元素宽高
字体：父字体

行高：参照自身字体
平移：自身宽高
边框圆角 自身宽高

8.flex布局

强大的伸缩性让块级元素的布局变得更加灵活
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
1.flex:1 子项目在主轴的缩放比例,不指定flex属性，则不参与伸缩分配
2.flex-direction调整主轴方向（默认为水平方向） column 垂直排列 | row 水平排列
3.justify-content调整主轴对齐（水平对齐） flex-start |flex-end|center|space-between|space-around
4.align-items调整侧轴对齐（垂直对齐） stretch 让子元素的高度拉伸适用父容器（子元素不给高度的前提下)|center|flex-start|flex-end
5、flex-wrap控制是否换行 nowrap不换行|wrap换行|wrap-reverse以相反顺序换行
6.align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
stretch|center|flex- start|flex-end|space-between|space-around
7.order控制子项目的排列顺序，正序方式排序，从小到大,数值小的排在前面

9.水平居中的实现

1.text-alien: center 只对文字 行内元素 行内块元素有效
2.margin: 0 auto 必须是块级元素，并且定宽
3.定位+平移 left:50% translateX(-50%)
4.flex布局 justify-content: center

10.垂直居中的实现

1.line-hight等于height 只对文字 行内元素 行内块元素有效
2.line-hight等于height+vertica-alien：middle 针对img img设置vertica-alien：middle 父元素设置line-hight等于height
3.定位+偏移 top:50% translateY(-50%)
4.flex布局 align-items: center;

11.两列布局的实现

左列定宽，右列自适应
  • 利用float+margin实现 左侧float,右侧margin-left值等于左侧宽度
  • 使用绝对定位实现 父元素相对定位，左右子元素绝对定位，右侧元素right:0 left:左侧元素宽度
  • 使用flex实现 父元素display:flex 左侧元素宽度固定 右侧flex:1 分摊剩余宽度
左列自适应，右列定宽
  • 利用float+margin实现 左侧float: left margin-left:-右侧宽度 右侧：float:right
  • 使用绝对定位实现 父元素相对定位，左右子元素绝对定位，左侧left:0 right:右侧宽度 右侧：right:0 定宽
  • 使用flex实现 父元素display:flex 右侧元素宽度固定 左侧flex:1 分摊剩余宽度
一列不定，一列自适应
  • float+overflow 左侧float:left 不设宽度 右侧overflow:hidden
  • flex实现 父元素display:flex 左侧不设宽 右侧flex:1

12.三列布局的实现

两列定宽，一列自适应
  • float+margin
  • float+overflow
  • flex
两侧定宽，中间自适应
  • 定位
  • flex

13.多列布局

等宽布局
  • float+宽度百分比
  • flex布局
九宫格布局

flex

posted @ 2020-04-09 10:32  zero博士  阅读(143)  评论(0)    收藏  举报