![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
CSS
·Q·
努力努力
展开
-
行级元素和块级元素的margin和padding
行级元素padding都生效,但margin上下不生效 div{ display: inline; background-color: aqua; padding: 10px 10px; margin: 10px 10px; }块级级元素padding,margin都生效(inline-block也一样)div{ display: block;原创 2021-04-26 22:49:55 · 416 阅读 · 0 评论 -
动画
动画transition 过渡 transition-property: css属性/none/all 默认all transition-duration: 过渡时间 秒 transition-timeting-function:过渡动画类型 默认ease linear: 线性过渡 等同于贝塞尔曲线(0.0,0.0,1.0,1.0)两个坐标 剩下的查api transition-delay: 过渡延迟时间 秒animation原创 2021-04-19 22:23:01 · 71 阅读 · 0 评论 -
响应式布局
思考以前多设备展示需要开发不同的页面响应式布局 只需要让用户在不同的设备上看到的页面呈现的效果是完美的1css像素 !=== 设备像素 (跟据屏幕分辨率和设备分辨率调节)meta 调节视口大小 跟据不同分辨率进行相应调节 以展示给用户的大小差不多name = ‘viewport’content=‘width=device-width,initial-scale=1.0’width = device-width; 在iphone/ipad上面横竖屏都等于竖屏宽度 不自适应initia原创 2021-04-19 22:16:15 · 140 阅读 · 0 评论 -
CSS3盒模型
盒模型直接影响整个结构的好与坏,影响js的复杂程度怪异模式下的盒模型 IE 6 Quirks mode普通模式下 boxWidth = width + border2 +padding 2contentWidth = widthIE6混杂模式 boxWidth = widthcontentWidth = width - border2 - padding2触发:box-sizing: 默认:content-box 混杂:border-box应用: 1.宽度不固定,但要求内边距固原创 2021-03-09 22:52:31 · 120 阅读 · 0 评论 -
js封装一个Fixed定位
利用窗体事件onscroll,滚动条滚动时,将div的margin-top设为当前滚动条的滚动距离.<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { position: absolute; background-color: #00FFFF; height: 100px;原创 2021-02-05 18:58:03 · 358 阅读 · 1 评论 -
CSS子元素相对父元素水平垂直居中
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效。#div1{ width: 300px; height: 300px; background-color: antiquewhite; } #div1 p { width: 100px; height: 100.原创 2021-01-29 18:09:00 · 1222 阅读 · 1 评论 -
属性值计算过程(比较重要)
属性值的计算过程一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行原创 2021-01-21 23:01:43 · 521 阅读 · 1 评论 -
Css扩展,注意点
行级元素和行级块元素都是文本类元素(带有 inline 的元素),文本类元素会受到文本分隔符的影响(只要有空格或者回车都会空一格,图片中间有空 隙,直接取消空格就行)。 文本类元素和文本类元素会底对齐,但是一旦文本类元素里边包含文字了,外边的文字就会和里边的文字底对齐,可以用 vertical-align:(填数字)px 调整对齐,他 还有一个默认的值 middle 是中对齐。 行级元素的 padding-top、padding-bottom、margin-top、margin-b..原创 2021-01-21 15:16:41 · 78 阅读 · 0 评论 -
CSS浮动流
浮动网页的布局方式 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(文档流/普通流)排版方式 其实浏览器默认的排版方式就是标准流的排版方式 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版 垂直排版, 如果元素是块级元素, 那么就会垂直排版 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版 浮动流排版方式原创 2021-01-21 11:25:20 · 161 阅读 · 0 评论 -
CSS各种选择的权重计算
权重值的进制为256选择器 权重 !important 无限大 行间 1000 ID 100 class/属性/伪类 10 标签 1 通配符 0原创 2021-01-21 00:35:26 · 121 阅读 · 0 评论 -
Margin塌陷解决方案
margin塌陷:子元素不能相对于父元素使用margin-top;其值必须大于父元素margin-top,而且父元素会随子元素一起移动。解决方案:1.设置父元素上边框(实际开发不提倡)2.让父级元素触发bfc:bcf触发条件:position:absolute ; display:inline-block; float:left/right; ove...原创 2021-01-21 00:02:14 · 195 阅读 · 0 评论 -
相对布局和绝对布局
position属性有四个值,static(默认值),fixed,relative(相对)和absolute(绝对)。relative是相对于当前位置进行定位,如果将top和left设为0,那么就是当前的位置,并且relative不脱离文档流占据位置:(啥都不影响)如图中这两个盒子一开始设置为相对布局top与left都设为0,结果和没设置定位的位置一样;absolute是基于父元素来定位,并且脱离文档流不占据位置,所以父元素也要设置position,不然会脱离父元素(absolute相当于被原创 2021-01-20 23:37:53 · 1391 阅读 · 0 评论