CSS
吃肉的素食主义者
你还好吗 暮十三
展开
-
移动端开发中vw和rem组合适配
什么是rem?我们做的单位em表示元素的字体大小跟随父元素大小相关联,比如父元素字体大小为10px,那么1em就是10px,2em则是20px; 而rem其实就是元素依据根元素的字体大小进行设置,这样的话如果我们网页中的元素使用rem作为大小的单位,就能实现等比缩放,也叫rem布局;说道移动端开发,就少不了对dpr的了解:dpr:设备像素比,它等于物理像素(真正意义上的像素大小,比如移动设备...原创 2020-04-17 00:18:36 · 610 阅读 · 0 评论 -
怪异盒模型&弹性盒
怪异盒模型怪异盒模型又叫IE盒模型,它可以使padding和border都在元素宽高的内部,不会把盒子撑大一般在移动端开发时使用。触发条件:box-sizing:border-box;例:我们设置了一个宽400px高300px的盒子,给它添加了10px的border和50px的padding,标准盒模型中,padding会把盒子撑大且border会在盒子的外部,而添加**box-sizi...原创 2020-04-14 22:36:40 · 388 阅读 · 0 评论 -
宽度自适应属性值fill-available、fit-content、max-content、min-content
CSS3中,对width新增了一些属性值,用来进行自适应。(IE不支持)1、width:fill-available;合理分配剩余有效空间:效果:fill-available可以让元素宽度进行自动填充,改元素不仅限于块状元素,行内元素亦是如此;此外,fill-available不同于width=100%,它会影响padding的解析,也就是加了padding后元素整体的宽高不会变化,不...原创 2020-04-14 13:33:35 · 1185 阅读 · 0 评论 -
CSS3伪类选择器&层次选择器
CSS3伪类选择器A、动态伪类选择器动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",":visited";另外一种被称作用户行为伪类最常见的锚点伪类:.demo a:link {color:gray;} 链接没有被访问时.demo a:visited{color:yell...原创 2020-04-11 22:16:30 · 247 阅读 · 0 评论 -
CSS3选择器
一、CSS3属性选择器;以下,E—>标签,attr—>属性 value—>属性值;1、E[attr]只使用属性名进行具体标签的选择;理论上只要是标签带有的属性,都可以使用;例:四张,宽度均为150px的图片:使用属性选择器进行样式修改:那么这四张带有alt属性的图片全部被选择:2、E[attr=“value”]属性且指定属性名,使用较多;语法:...原创 2020-04-11 16:41:50 · 82 阅读 · 0 评论 -
H5新标签简介
H5新标签在html第5次重大更新后,也就是H5中,为了使html在实际开发中更加灵活、简洁,H5新增了一些标签和一些新的规定。新增的语义化标签section 更偏于划分区域。(网页的外围结构…更类似与div)article 更偏向于内容的展示aside 侧边栏(在一旁的)header 网页头部或者是内容块头部footer 网页的顶部或者内容快的底部na...原创 2020-04-09 21:56:23 · 1042 阅读 · 0 评论 -
CSS3的动画属性
动画属性:animation;在元素的移动中,我们除了常用的利用hover配合过渡trasition,定位和位移外,我们还会用到动画属性animation;CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。首先,动画的实现的通过对关键帧的调用来实现的。不同于过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧的话来说,...原创 2020-04-08 22:20:10 · 103 阅读 · 0 评论 -
CSS_3D
3D空间属性---->transform-style:preserve-3d;CSS代码演示:我们把box转换成3D空间,然后先对box进行Y轴方向的20度旋转,方便我们看到后面Y轴旋转的h1的效果:(视频还在审核,我先发出来,明天再补视频链接···)对于box2,我们对子元素h2进行Z轴方向的位移,也就是说h2在box2上方300px处,然后我们对box2进行Y轴的50度旋转,...原创 2020-04-07 21:46:19 · 121 阅读 · 0 评论 -
CSS的2D属性transform
属性transform(变形)它的属性值是很多的功能函数,下面一一介绍:1、位移函数---->transform:translate(x,y),x、y对应left、top;位移的作用类似于相对定位relative,可以将元素默认基于原先位置进行移动;(本文所有的例子,都添加有1s的过渡效果,即transition:1s;)例:(鼠标划过box1时,h1向右移动200px,垂直方向不...原创 2020-04-07 21:36:10 · 185 阅读 · 0 评论 -
CSS的过渡
过渡属性:transition过渡类似于background,可以简写,与过渡有关常用的属性有:1. transition-property:检索或设置对象中的参与过渡的属性2. transition-duration:检索或设置对象过渡的持续时间3. transition-delay:检索或设置对象延迟过渡的时间4. transition-timing-function:检索或设置对象...原创 2020-04-04 20:22:45 · 270 阅读 · 0 评论 -
CSS的渐变属性
1、何谓渐变?让背景色在多个颜色中平稳过渡。所谓平稳,类似于左图这样谁要跟你说右图是渐变,你可以拿出你鼠标垫下39米长的大刀让他先跑40米… …2、渐变介绍线性渐变----->linear-gradient()语法:background: linear-gradient(direction, color-stop1, color-stop2, …);它其实是个功能函数,包含...原创 2020-04-04 17:57:50 · 772 阅读 · 0 评论 -
浏览器前缀简介
浏览器前缀来源?很多css3属性 最初的预览版没有形成最终的正式版,但是为了支持这些新属性,很多主流浏览器提供了属于自己的语法规则 ,即“浏览器前缀”各主流浏览器的前缀:-webkit- 谷歌、苹果 浏览器前缀-moz- 火狐浏览器前缀-ms- IE浏览器前缀-o- 欧鹏浏览器注: 添加浏览器前缀 -> 兼容...原创 2020-04-04 16:58:48 · 761 阅读 · 0 评论 -
简述BFC
BFCBFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC的布局规则一、内部的Box会在垂直方向,一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的m...原创 2020-04-03 00:09:31 · 150 阅读 · 0 评论 -
关于表格&表单
表格补充1 : 数据行分组<thead></thead><tbody></tbody><tfoot></tfoot>2 : 数据列分组<colgroup span="value"></colgroup><!--span属性为把几列分为一组-->3 : 列标题<th...原创 2020-04-01 21:51:30 · 110 阅读 · 0 评论 -
简述PC端的宽高自适应问题
PC端的宽高自适应宽度自适应(了解):元素的宽默认是跟随父元素的, 尽量不要规定死;不写默认是100%的父元素的宽度;后续:宽度100%,根据窗口的宽度不同,作出不同结构变换的响应式网页;高度自适应;高度自适应第一种情况:内容撑开父元素主要针对内容块;(考虑一些版块后期会不会经常性修改)需求一:当元素的height不去设置或者是设置成auto是(默认),那么height是被内容撑开的...原创 2020-03-31 23:08:58 · 925 阅读 · 0 评论 -
定位补充
position :fixed: 固定 --------------->经常原来做广告233333333333参照物为浏览器窗口;脱离布局流;将元素固定在浏览器正中间: 方法1、fixed left:50%; top:50%; 然后再用margin-left:-1/2width; margin-right:-1...原创 2020-03-30 21:43:57 · 116 阅读 · 0 评论 -
CSS中元素的定位
定位属性:position —>检索或设置对象的定位方式A、position:static 静态定位—> 默认值,static元素会忽略任何的right、top、left、bottom声明;B、position:absolute 绝对定位—> right:0; bottom:0; 定位在参...原创 2020-03-28 23:47:43 · 91 阅读 · 0 评论 -
HTML中单行文本溢出时的省略号处理
单行文本溢出时的省略号处理常见的出现在新闻列表中:一般只有单行文本溢出才做省略处理CSS语句:1、white-space: 以下属性值: pre:将文本按照预文本的格式输出 pre-wrap: 预文本且根据宽度自动换行 pre-line:和默认的也要 nowrap: 不让文本换行(常用) inherit:继承父元素的值2、**溢出overflow属性值...原创 2020-03-27 21:17:06 · 167 阅读 · 0 评论 -
元素类型及其转换
元素类型:HTML对标签分类----->单、双标签;CSS中对标签的分类:1、块状元素: 默认情况下在页面中以矩形区域显示; 自上而下排列,独占一行 可以直接添加宽高 一般情况下,作为其他元素的容器;2、内联元素(行内元素): 在页...原创 2020-03-26 21:18:14 · 233 阅读 · 0 评论 -
CSS盒模型
CSS盒模型paddingpadding是在内容和盒子直接的,在盒子内部;padding是为了调整子元素在父元素内部的位置关系;padding 会改变盒子大小,如果想让盒子大小不变,需要让宽高减去对应padding的值;padding不能为负值;padding不会对背景图造成影响;注:如果一个盒子没有设置固定的宽高,那么padding值就不用减;margin margine是...原创 2020-03-25 20:21:58 · 76 阅读 · 0 评论 -
CSS的列表、边框、背景图属性
CSS的列表列表样式类型 list-style-type:圆形circle/方形squre以图片代替标签 list-style-images:重点:list-style:none;我们一般都要清除默认属性;CSS的边框 borderborder-width:边框宽度boder-style:none/实线solid/虚线dashed/点状线dottedborder-color:边...原创 2020-03-23 22:59:39 · 225 阅读 · 0 评论 -
CSS的文本属性
CSS文本属性1、font-size: 控制文本大小 a、规定,默认是16px,为标准字体大小; b、文本字体大小设置为偶数; c、PC端项目,设置大小尽量不低于12px; d、从PS获取文本大小,汉字量取文本高度;另:文本单位除像素px外,还有pt (一般不用) 9pt = 12px 12pt =16px默认情况下,1em=16px 但是不同情况...原创 2020-03-20 23:18:38 · 1886 阅读 · 0 评论 -
CSS的选择器及其权重问题
CSS的选择器: 选择器:就是给标签取名字选择器的类型:1、标签(类型)选择器:(权重为1) 标签选择器可以对所有的同类标签起作用,对应标签div/p/i/strong 语法: 标签 {属性:属性值;}应用场景:需要统一或者清除标签内容的样式时;2、id选择器:(权重为100) 语法: 在标签内给用id给标签起名字:<标签 id=“名称”><...原创 2020-03-19 19:41:39 · 333 阅读 · 0 评论 -
CSS样式表的权重
CSS样式表的权重问题:当一个标签同时被多个样式表所作用时,就会出现一个问题,执行哪个样式?这个时候就要考虑到样式表的权重问题。例:外部CSS代码:**运行结果:显示的是绿色,原因是因为行内样式表的权重较高,会优先执行;我们将行内样式表的背景色属性删去且修改div的宽高:结果如下:由于行内样式表权重高优先执行,div的宽高变成了行内样式表设置的100px,而行内样式表没...原创 2020-03-19 19:34:28 · 1135 阅读 · 0 评论 -
CSS的语法及三种样式表
CSS语法 选择符{ 属性:“属性值”; }英文的分号结尾,属性和属性值之间用冒号, 例如:div{width:100px;}最好放在head里面,考虑到加载顺序。CSS的引入方法方法一:方法二: @import url(“路径”)link和impotent的区别:1、link是HTML的一个标签,而@import 属于CSS提供的应该方法2...原创 2020-03-18 23:05:58 · 567 阅读 · 0 评论