![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
CSS总结
Bliss_妍
这个作者很懒,什么都没留下…
展开
-
圆?半圆?椭圆?
div { width: 100px; height: 100px; background-color: red; margin-top: 20px;}.box1 { /* 圆 */ /* border-radius: 50%; */ border-radius: 50px;}.box2 { /* 半圆 */ height: 50px; border-radius: 50px 50px 0 0;}.box3 { /* 椭圆 */ height: 50px;.原创 2020-09-14 07:46:52 · 153 阅读 · 0 评论 -
如何画三角形?
.triangle { width: 0; height: 0; border: 100px solid red; border-color: red transparent transparent transparent;}/*或者*/.triangle { width: 100px; height: 100px; border: 100px solid transparent; border-top-color: red; box-sizing: border.原创 2020-09-14 07:45:48 · 826 阅读 · 0 评论 -
CSS中可继承的属性
可继承的只有:颜色、文字、字体间距、行高对齐方式,列表样式。所有元素可继承:visibility和cursor。内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。块状:text-indent和text-alig原创 2020-09-14 07:44:40 · 895 阅读 · 0 评论 -
页面变灰
body { filter: grayscale(100%); /* 百分比或者 0~1 */}原创 2020-09-14 07:43:31 · 69 阅读 · 0 评论 -
文字超出显示省略号
文字单超出显示省略号div { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}文字多行超出显示省略号div { width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}该方法适用于WebKit浏览器及移原创 2020-09-14 07:43:09 · 169 阅读 · 0 评论 -
CSS3新特性
transition:过渡 transform: 旋转、缩放、移动或倾斜 animation: 动画 gradient: 渐变 box-shadow: 阴影 border-radius: 圆角 word-break: normal|break-all|keep-all; 文字换行(默认规则|单词也可以换行|只在半角空格或连字符换行) text-overflow: 文字超出部分处理 text-shadow: 水平阴影,垂直阴影,模糊的距离,以及阴影的颜色。 box-sizing: conte原创 2020-09-14 07:42:16 · 107 阅读 · 0 评论 -
实现气泡效果的聊天框
1.css3中通过border-radius实现圆角效果.radius{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}2.通过实现一个三角形充当气泡的尾巴,将容器的宽度以及高度设置为0,然后给盒容器设置一个较粗的边框,浏览器会在边框的交界处绘制结合线.triangle{ height:0px; width:0px; border-width:20px;...原创 2020-08-27 18:25:13 · 614 阅读 · 0 评论 -
实现一个搜索框,按钮宽度固定,input的宽度自适应
1. 利用flex-grow让input填充剩余空间<div> <input> <button type="button">搜索</button></div>div{ display: flex;}button{ width:100px;}input{ flex-grow: 1;}2.同样使用flex布局,给input设置width:100%;给button设置固定宽度同样可以让Input填充剩余空...原创 2020-08-27 16:16:02 · 985 阅读 · 0 评论 -
CSS如何实现双飞翼布局?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Docum...转载 2020-08-21 17:33:20 · 267 阅读 · 1 评论 -
transform、translate、transition、animation区别
1. transform:描述了元素的静态样式,本身不会呈现动画效果,主要应用于元素的 2D 或者 3D转换,可以将元素 旋转、缩放、移动、倾斜等,使用的时候注意兼容性就好了;2. translate:主要控制目标元素的移动(2D、3D)。目前为止还可以说是一个 CSS 变换函数,赋值给transform使用,而不是一个完全可以单独使用的css属性,因为目前只有火狐浏览器支持它的css属性写法;3. transition:CSS过渡属性,为一个元素在不同状态切换的时候定义不同的过渡效果。4. a原创 2020-08-21 17:32:41 · 1066 阅读 · 0 评论 -
margin垂直方向边界叠加
margin值计算方法:a、全部都为正值,取最大者;b、不全是正值,则用最大正边界减去绝对值最大的负边界;c、没有正值,用0减去绝对值最大的负边界。1、水平边距永远不会重合。2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。3、相邻的盒模型中,如果其中的一个是浮动的(float),垂直margin不会重叠,并且浮动的盒模型和它的子元素之间也是这样。4、设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)。5、原创 2020-08-21 17:32:02 · 172 阅读 · 0 评论 -
CSS如何进行圣杯布局,而且要做到左右宽度固定,中间宽度自适应。
1.利用flex布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .header,.footer{ height:40px; width.原创 2020-08-21 17:31:16 · 294 阅读 · 1 评论 -
CSS如何进行品字布局?
第一种:<!doctype html><html><head> <meta charset="utf-8"> <title>品字布局</title> <style> * { margin: 0; padding: 0; } body { overflow: hidden; } div { margin: auto .原创 2020-08-21 17:30:57 · 542 阅读 · 0 评论 -
布局题:div垂直居中,左右10px,高度始终为宽度一半
问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A,文字需要水平垂直居中。思路一:利用height:0; padding-bottom: 50%;<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device.原创 2020-08-21 17:29:54 · 1219 阅读 · 0 评论 -
盒模型
盒模型由content+padding(内容与边框之间的距离)+border+margin(边框与外部元素的距离)组成。标准文档流中,两个盒子,分别有上下外边距,竖直方向的margin不叠加,只取较大的值作为margin(水平方向的margin是可以叠加的)。margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。如果向设置父子之间的距离,我们最好使用父元素的padding。盒模型分为 : W3C标准盒子 、IE盒子可以通过box-sizing的原创 2020-08-21 17:25:57 · 116 阅读 · 0 评论 -
选择器、优先级、计算规则
css选择器分为简单选择器,伪元素选择器和组合选择器。简单选择器又分为标签选择器,类选择器,ID选择器,通配符选择器,属性选择器和伪类选择器。css中权重最高的样式为行内样式,就是以style=“”方式直接加入到HTML标签内的样式,其在css优先级中具有最高的权重。其次是ID选择器,ID选择器由于每一个ID在代码中只能出现一次,和唯一指向性,具有第二高的权重。权重处于第三的是类、伪类和属性选择器。权重较低的是标签选择器和伪元素选择器。css优先级的计算方式可以用一下公式来解决value=a*10原创 2020-08-19 11:00:55 · 376 阅读 · 0 评论 -
flex
flex布局则是通过为修改父div的display属性,让父元素成为一个flex容器,从而可以自由的操作容器中子元素(项目)的排列方式。例如我们让多个div横向排列,传统做法是使用浮动,但浮空后因为脱离文档流的缘故,父元素会失去高度,这又涉及了清除浮动等一系列的问题。而flex布局相对简单很多,修改父元素display:flex,你会发现div自动就排列成了一行,而且没有浮动之后的副作用,从回流角度考虑,flex的性能更优于floatflex布局属性主要由容器属性和项目属性构成容器属性:1.f原创 2020-08-19 10:58:55 · 282 阅读 · 0 评论 -
display
display属性用于规定元素生成的框类型,影响显示方式 值: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | in原创 2020-08-19 10:58:00 · 3093 阅读 · 0 评论 -
BFC
1. BFC:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为"visiable"的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。2. 触发条件一个HTML元素要创建BFC,则满足下列的任意一个或多个条件即可: 下列方式会创建块格式化上下文:根元素()浮动元素(元素的 float 不是 none)绝对定位原创 2020-08-18 14:33:53 · 91 阅读 · 0 评论 -
position元素定位
1.absolute:生成绝对定位的元素,相对第一个非static的父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。2.relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。3.fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。4.原创 2020-08-17 09:22:34 · 276 阅读 · 0 评论 -
使用display:inline-block会产生什么问题?解决方法?
问题: 两个display:inline-block元素放到一起会产生一段空白。产生空白的原因:元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据CSS中white-space属性的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。解决办法:1. 将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行原创 2020-08-16 11:32:20 · 685 阅读 · 0 评论 -
浮动布局的优点、缺点;清除浮动的方式
浮动布局:当元素浮动以后可以向左或向右移动,直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流。优点:在图文混排的时候可以很好的使文字环绕在图片周围;当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等;与inline-block有一些区别,横向排序的时候,float可以设置方向而inline-block方向是固定的;inline-block在使用时有时会有空白间隙的问题缺点:浮动元素一旦脱离了文档流,就无法撑起父元素,会造成父级元原创 2020-08-16 11:29:54 · 418 阅读 · 0 评论 -
元素水平垂直居中
补充:行内元素、块状元素、行内块状元素,display可以将其任意转换(1)display:inline;转换为行内元素(2)display:block;转换为块状元素(3)display:inline-block;转换为行内块状元素行内元素有:span行内元素特征:1. 设置宽高无效;2. margin仅左右方向有效,上下无效;padding上下左右都有效,会撑大空间;3. 不会自动进行换行块状元素有:div、p、等块状元素的特征:1. 能够识别宽高...原创 2020-08-16 11:29:07 · 110 阅读 · 0 评论 -
回流和重绘
回流:触发条件:当对 DOM 结构的修改引发 DOM 几何尺寸变化的时候,会发生回流的过程。回流过程:由于DOM的结构发生了改变,所以需要从生成DOM这一步开始,重新经过样式计算、生成布局树、建立图层树、再到生成绘制列表以及之后的显示器显示这整一个渲染过程走一遍,开销是非常大的。例如以下操作会触发回流:(1)一个 DOM 元素的几何属性变化,常见的几何属性有width、height、padding、margin、left、top、border 等等, 这个很好理解。(2)使 DOM 节点发生增减或者移动原创 2020-08-16 10:54:20 · 212 阅读 · 0 评论