CSS
远方_ry
我们还年轻,长长的人生可以受一点风浪!
展开
-
两栏布局之右定宽左自适应,上定高下自适应,下定高上自适应
这三种布局其实都是大同小异,今天就全部总结成一篇文章。1.右定宽左自适应<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty原创 2020-08-03 18:23:07 · 284 阅读 · 0 评论 -
上下定高中间自适应的三栏布局
共有四种实现方法,其原理与左右定宽中间自适应差不多,更多适用于移动端。 *{ padding: 0; margin: 0; } html, body{ height: 100%; } .layout{ height: 100%; } .layout article > div{ width: 100px; }1.flex布局 <!-- flex布局 --&g原创 2020-08-03 16:07:12 · 329 阅读 · 0 评论 -
CSS实现多种图案
1.圆形原理:上下左右都是圆角且为宽高一半 .circle{ width: 100px; height: 100px; background-color: red; border-radius: 50%; }2.椭圆形原理:块级元素为宽高比为2:1的矩形,border-radius为宽度的一半除以高...原创 2019-08-13 10:35:32 · 217 阅读 · 0 评论 -
左侧定宽,右侧自适应两栏布局
CSS两栏布局(左侧定宽,右侧自适应)方法一:float + margin-left/*css*/.left1{ width: 100px; background-color: red; float:left;}.right1{ background-color: green; margin-left: 100px;}//HTML&l...原创 2019-08-07 18:11:12 · 129 阅读 · 0 评论 -
CSS单位
1.px:绝对单位,页面按照精确像素展示2.em:相对单位,相对于当前元素大小来计算3.rem:相对单位,相对于<html>元素大小来计算4.vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%5.vh:viewpoint height,视窗高度,1vh等于视窗高度的1%6.vmin:vw和vh中的较小者7.vmax:vw和vh中的较大者...原创 2019-08-14 11:09:57 · 90 阅读 · 0 评论 -
元素常见的居中方式
1.行内文字居中,未设置高度,定位,浮动的情况下失效 text-align:center,水平居中 line-height: 行高,垂直居中2.表格内元素的居中 text-align:center,水平居中 vertical-align:middle,垂直居中3.元素水平居中,父元素和居中元素设置宽 使用外边距:margin:0 auto;...原创 2019-08-06 15:23:30 · 121 阅读 · 0 评论 -
选择器的优先级
选择器的类型1. * (通配符选择器):获取所有子元素2. 类型选择器(标签名选择器):获取所有该种元素3. 类名选择器 (.class):获取所有具有该种类名的元素4. id选择器(#id):获取所有具有该id值得元素5. 组合选择器:选择器之间用空格隔开6. 后代选择器:从父元素一直到子元素选择器,如#div ul li7. 群组选择器:具有相同样式的选择器,用逗号...原创 2019-08-06 14:14:35 · 273 阅读 · 0 评论 -
左右定宽,中间自适应三栏布局
三栏布局(左右定宽,中间自适应)方法一:圣杯布局.box1{ padding: 0 150px 0 200px;}.main1,.left1,.right1{ float: left; height: 100px; position: relative;}.main1{ width: 100%; background-color: ...原创 2019-08-07 22:36:57 · 103 阅读 · 0 评论 -
定位详解
position的六种属性及特点1.static:无定位元素出现在正常流中 没有设置定位方式时,默认为static,按照文档的流式定位,将元素放在一个合适的位置 在不同的分辨率下采用流式定位能够很好地自适应,去得相对较好的布局效果流式布局就是页面元素的宽度按照屏幕的分辨率进行调整,而页面的整体布局不变2.inherit:继承父元素3.relative:相对定位4.a...原创 2019-08-05 17:18:52 · 112 阅读 · 0 评论 -
float(对块级,行内,内联块元素的影响),如何清除浮动
浮动的影响浮动会使块级元素和内联元素具有内联块元素的特点,块元素可以一行显示,内联元素可以设置宽高。使得元素脱离文档流,按照浮动的方向移动,遇到父级边界或者相邻浮动元素停住:float:left / right / none,子元素脱离文档流,结果会使父元素高度崩塌清除浮动1.为父元素设置高度 优点:兼容性好 缺点:高度未知,可能会导致子元素换行2.ov...原创 2019-08-05 15:48:32 · 1262 阅读 · 0 评论 -
CSS中display为flex和inline-flex的区别
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局。display: flex 将对象作为弹性伸缩盒显示display: inline-flex 将对象作为内联块级弹性伸缩盒显示flex效果:没有为父元素设置宽度,所以父元素的宽度为100%,而高度则是由子元素撑开,既高...原创 2019-06-20 10:22:34 · 5203 阅读 · 0 评论