当前位置：首页>前端>正文

swift uilabel 自适应宽度再增加 css宽高自适应

前端2024-05-14 22:36:21

一.宽高自适应

概念：

宽高自适应
	1、概念：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
	元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
	2、宽度自适应
	+ width:auto; 和不设置宽度效果是一样的，根据块级元素的特性来使用的
	+ 外层元素使用百分比单位，百分比单位需要参照物
	3、高度自适应
	+ height:auto; 和不设置高度效果是一样的，高度在标准流中内容会把容器高度给撑开
	+ 高度也可以使用百分比，需要参照物

宽高自适应属性
	1、为了更好的实现的页面布局的自适应，css给咱们提供了几个属性帮助咱们进行页面布局
	2、属性
	+ min-width 最小宽度，设置了一个最小宽度，当大于最小宽度时元素宽度自适应，小于宽度不变
	+ max-width 最大宽度，设置看一个最大宽度，当宽度小于最大宽度时元素宽度自适应，大于不变
	+ min-height 最小高度，元素一开始有一个固定的高度（最小高度），当内容超出设置的高度的时候高度会自适应
	+ max-height 最大高度，元素一开始是自适应的，当内容超出设置的高度（最大高度）的时候会溢出

min-height在低版本的IE浏览器下不起作用，IE低版本的浏览器下height就是最小高度
	当height和min-height都存在的时候，height会起作用
	min-height: 200px;
	下划线过滤器，下杠谷歌浏览器它是不识别的，只有低版本的IE浏览器才识别
	_height: 200px;
	border: 1px solid;

过滤器
	1、下划线过滤器，给属性前面添加一个下杠，高版本的浏览器不识别而低版本的IE浏览器可以识别，这样就达到了一个过滤的作用
	+ 例子：最小高度兼容问题
	+ 语法：_属性:属性值;
	2、关键字过滤器
	+ css给咱们提供的一个关键字可以帮助咱们做一些特定的事情
	+ 语法:属性:属性值 !important;
	+ !important表示最高优先级优先级排列顺序 !important>内联样式表>id选择器>class选择器...

隐藏	元素隐藏
	1、display:none; 直接隐藏，后面的元素会进行补位操作，不占位置的
	2、visibility:hidden; 占位隐藏，元素你看不见，但是位置在，可以使用它进行隐藏后不影响页面结构，元素功能不存在
	3、opacity:0; 透明度为0间接的让咱们看不到元素了而已，相当于隐藏了，被隐藏的元素的功能存在

	溢出隐藏
	+ overflow:hidden;

百分比单位

比单位

.可以让内容更加的灵活

.需要参照物

.也叫做流式布局

百分比单位使用

.百分比单位以前在移动端使用是最多的，目的是为了适配不同的手机屏幕

.之前在移动端都是百分比单位混合其他单位使用

.现在的移动端使用rem或者vm单位做适配更多

参照父元素宽度的元素：padding margin width text-indent

参照父元素的高度：height

line-height参照父元素属性font-size

相对定位的时候，top.....left参照的是父元素内容区域的高度，而绝对定位的时候参照的是最近元素元素定位的包含的高度与宽度

伪类选择器：描述的是某种状态
	+ link
	+ visited
	+ hover
	+ active

	伪对象（元素）选择器
	+ 伪对象选择器是通过css的形式可以给元素添加一个标记，添加的标记不是真正的标记但可以当做标记正常使用
	+ ::after 在标记后
	+:: before 在标记前

如何弄出小三角

	意思就是先弄成标准正方形，然后选择想要方向的小三角，再用定位的要求做出想要的一般采用 absolute定位属性值进行移动
	height: 0; width:0;
	transparent表示透明属性,,
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid purple;
	border-bottom: 50px solid transparent;