![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
@码上行动
前端基础以及常见API更新,敬请期待!!!
展开
-
css标准盒模型
文章目录标准盒模型一、padding(内边距)二、margin(外边距)总结标准盒模型标准盒模型盒子的实际大小盒子的总宽度 = width + 左右的padding + 左右的border盒子的总高度 = height + 上下的padding + 上下的border一、padding(内边距)控制内容与盒子边框的关系(又叫内填充)填充:padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白;用法:1)用来调整内容在容器中的位置关系 2)paddin原创 2021-06-21 11:31:35 · 145 阅读 · 1 评论 -
CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?
CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?1、选择符2、继承3、优先级总结CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?1、选择符基本选择器: 标签选择器 div,h1,p{} 多个标签时为群组选择器 id选择器 #mydiv{} 类名选择器 .mydiv{} 通配符选择器 *{}层次选择器: 后代选择器 parent n{} 选中parent元素原创 2021-06-18 18:37:12 · 1505 阅读 · 0 评论 -
移动端像素
移动端1、移动端媒体查询结合rem (流式布局、100%)vw结合rem (等比缩放布局)2、dpr 设备像素比物理像素 (PS测量的像素)逻辑像素 (css设置或者屏幕显示的像素)3、dpr =物理像素/逻辑像素640px (5/4) dpr2750px (6/7/8) dpr21080px dpr34、单位:绝对定位 px、pt相对单位 100%em(父元素的fontsize值)rem(根元素html的fontsize值)5、禁止网页缩放:@media al原创 2021-06-18 18:36:53 · 101 阅读 · 1 评论 -
css多列
css多列1、columncount:列数; 分割成几列2、column-gap:50px; 列之间的距离3、column-rule:2px solid red; 列之间的分隔线4、column-fill:auto/balance; 内容排列的高度 auto: 前面填满、空白留在最后一列; balance: 空白平分在每一列;5、column-span:none/all; all: 标题跨所有的列(text-align居中)6、colum原创 2021-06-18 18:36:10 · 57 阅读 · 0 评论 -
css三种盒模型总结
文章目录一,标准盒模型二,怪异盒模型三,弹性盒模型(1)设置主轴的方向:(2)设置内容换行(默认元素会自动挤压、不换行)(3)设置主轴的排列方式(4)设置侧轴的排列方式(5)设置多行内容排列(6)alignself属性(单个定义时用)(7) 给灵活元素设置的样式(8)flexgrow属性(9)flexshrink属性(10)flexbasis=width属性(11)flex属性总结一,标准盒模型点击查看标准盒模型介绍box-sizing:content-box;(标准盒模型)盒子的总宽度原创 2021-06-17 09:07:14 · 1010 阅读 · 0 评论 -
CSS3新增属性
文章目录CSS3新增属性1、文字阴影2、盒子阴影3、圆角边框4、换行5、背景裁切(背景颜色)6、背景原点(背景图片)7、背景尺寸8、边框属性9、多重背景属性总结CSS3新增属性1、文字阴影text-shadow:2px 3px 4px red; 水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色 注:水平阴影和垂直阴影可以设负值(-左+右)2、盒子阴影box-shadow:2px 3px 4px 5px blue inset;inset:是否设置内阴影、放在最后(默认外阴影)原创 2021-06-17 09:06:44 · 58 阅读 · 0 评论 -
如何让元素在浏览器窗口水平垂直居中
元素在浏览器窗口水平垂直居中元素设置固定定位 position:fixed;方法1:给子元素设置属性: left: 50%; top: 50%; margin-left: -50px;(margin回退为子元素自身宽度的一半) margin-top: -50px;(margin回退为子元素自身高度的一半)方法2:给子元素设置属性: left: 0; top:0; right: 0; bottom:0; margin:auto;拓展:如何让子元素在父元素中水平垂直居中?总原创 2021-06-07 11:40:17 · 594 阅读 · 0 评论 -
CSS层叠和继承
1、继承继承:子元素继承父元素的属性不可继承的属性:display、margin、border、padding、height、min-height、max- height、min-width、max-width、background、overflow,position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align所有元素可继承的属性visibilitycursor内联元素可继承:let原创 2021-06-04 15:19:36 · 106 阅读 · 0 评论 -
常见的css浏览器兼容问题
常见的CSSbug和CSShack先简单的介绍下五大浏览器的内核和代表作Trident:IE MaxThon(遨游) 、腾讯 、 Theword(世界之窗) 、 360浏览器 Gecko:Mozilla Firefox Presto:Opera Webkit:Safair 、Chrome 、遨游浏览器3 Blink: Opera Software、Google 国产双内核:Blink、Trident1、图片边框bug:当a包裹图片的时候,在IE10或以下浏览器会自带边框;解原创 2021-06-04 15:18:48 · 1649 阅读 · 0 评论 -
前端css伪对象选择符
伪对象选择符:after 与content属性一起使用,定义在对象后的内容:before 与content属性一起使用,定义在对象前的内容:first-letter 定义对象内第一个字符的样式,注:该伪元素只能用于块元素:first-line 定义对象内第一行的样式,注:该伪元素只能用于块元素,ie6以下版本浏览器不支持伪对象选择符::selection 选中之后的样式 只支持这background color属性总结以上是对伪对象选择符的小总结,后期将继续更新html基础知识点文原创 2021-06-04 15:18:21 · 76 阅读 · 0 评论 -
前端如何解决高度塌陷问题
高度塌陷出现原因:如果父元素不设置高度或者父元素设置最小高度,一旦内容浮动,内容不占位 父元素识别不了子元素的高度,就会出现高度塌陷解决方法:方法1:给父元素加overflow:hidden(overflow:hidden可以触发BFC,BFC是一个独立的渲染区域,布局规则:浮动的元素也参与高度计算)缺点:超出父元素范围的内容会隐藏方法2:给所有浮动元素的最下方写一个空盒子,给空盒子设置clear:both,让盒子在所有浮动元素的下方显示,就可以把父元素的高度撑起来缺点:无原创 2021-06-01 19:14:57 · 690 阅读 · 0 评论 -
前端过滤器
过滤器的使用:下划线过滤器:语法:选择符{_属性:属性值;} !important关键字过滤器:语法:选择符{属性:属性值 !important;} 其他过滤器\9:IE浏览器组语法:选择符{属性:属性值\9;} \0:IE8 包括IE8语法:选择符{属性:属性值\0;}只有IE8以上浏览器起作用*:ie7 IE7 以下(包括IE7) 识别语法:选择符{+属性:属性值;} :root选择器 除了IE8及更早的浏览器识别语法:root 选择符{属性:属性值;}总结以上原创 2021-06-01 19:14:31 · 469 阅读 · 0 评论 -
前端页面实现宽高自适应
宽高自适应1、宽度自适应 width:100%; // 元素宽度设置为100%。(块元素宽度默认为100%)2、高度自适应元素 {height : auto; } 或高度不写 height:100%; // 子元素的高度由父元素决定 3、最大小高宽度min-height(最小高度) 注:height属性在IE6里就类似min-height作用。max-height(最大高度)min-width(最小宽度)max-width(最大宽度)注:IE6及以下版本不识别该组属性。既要原创 2021-05-26 10:58:05 · 7011 阅读 · 0 评论 -
前端制作动态导航案例2
动态导航案例2导航效果:代码示例:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> *{margin:0;padding:0;} ul,li{list-style: none;} a{text-decoration: none;} /*nav2*/原创 2021-05-26 10:56:03 · 87 阅读 · 0 评论 -
前端制作动态导航案例1
动态导航案例1导航效果:代码示例:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> *{margin:0;padding:0;} ul,li{list-style: none;} a{text-decoration: none;} /*nav1*/原创 2021-05-26 10:55:45 · 278 阅读 · 0 评论 -
前端制作动态导航案例3
动态导航案例3导航效果:代码示例:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> *{margin:0;padding:0;} ul,li{list-style: none;} a{text-decoration: none;} /*nav3*/原创 2021-05-25 14:27:52 · 101 阅读 · 0 评论 -
前端页面如何使用粘性定位
粘性定位当页面滚动到一定程度的时候,让某元素固定在指定位置position:sticky;代码示例:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2021-05-24 10:37:44 · 776 阅读 · 0 评论 -
前端图片整合/雪碧图/精灵图用法
图片整合(CSS Sprites)又叫css精灵 / 雪碧图原理:图片整合技术是把小图标整合成一张大的背景图片,通过插入背景图和background-position调整图片的位置来显示图片优点:1、减少服务器的请求次数,提升网页的加载速度,减少服务器的带宽2、减小图片的体积缺点:不利于后期的维护整合代码示例:<style> *{margin:0;padding:0;} .wrap{ width:400px; height: 200px;原创 2021-05-20 10:51:20 · 229 阅读 · 0 评论 -
前端页面制作滚动字幕
滚动字幕语法:<marquee behavior="scroll/alternate" direction="up/down/left)/right" scrollamount="value" height="value(上下滚动范围)" width="value"(左右滚动范围)> 内容区</marquee>属性:behavior(行为)="scroll(滚动)/alternate(晃动)"direction(方向)原创 2021-05-20 10:50:21 · 692 阅读 · 0 评论