![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 60
笔记
丫呀nice
这个作者很懒,什么都没留下…
展开
-
响应式布局与自适应布局
响应式布局是什么意思?响应式布局可以根据不同的浏览设备(PC端,平板,智能手机等)呈现不同的网页布局,同时减少缩放、平移和滚动。响应式网页设计就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。适应移动端的大趋势,提高用户体验,减少开发成本。为什么要使用响应式布局?主要是**使网页适用于移动端设备,**屏幕分辨率是出现的最大的兼容性问题。可以为不同的设备提供不同的网站,也就是同一网站做普通PC端和移动端两种页面。不论是前期的开发还是后期的维护改版,都非常的麻烦。响应式布局的缺点?兼转载 2020-08-12 15:42:25 · 3712 阅读 · 1 评论 -
flex:1
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。flex-grow:定义项目的放大比例;默认为0,即 即使存在剩余空间,也不会放大;所有项目的flex-grow为1:等分剩余空间(自动放大占位);flex-grow为n的项目,占据的空间(放大的比例)是flex-grow为1的n倍。flex-shrink:定义项目的缩小比例;默认为1,即 如果空间不足,该项目将缩小;所有项目的flex-shrink为1:当空间不足时,缩小的比例相同;转载 2020-08-05 16:19:38 · 144 阅读 · 0 评论 -
伪元素和伪类的区别的区别:是否生成了DOM
伪元素,例如,:before :after伪类,例如,:nth-child()伪元素和伪类的区别:(1)伪类和伪元素的最大区别就在于有没有创建一个文档树以外的元素。伪元素创建了一个文档树以外的元素(虚拟容器)并为他添加样式,这个容器不包含任何DOM元素但是可以包含内容。换句话说伪类和伪元素的区别就是伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档树以外的元素。(2)伪类使用的是单冒号,但是在css3中规定伪元素使用的双冒号,但是除了少部分的伪元素必须使用双冒号以外,像after还转载 2020-06-28 21:42:51 · 608 阅读 · 0 评论 -
三栏布局
方法一:margin 左侧和右侧用浮动或定位,中间用margin居中 margin:0 60px方法二:position 左侧和右侧用position:absolute,中间用margin居中 margin:0 60px方法三:BFC 左边float:left;右边float:right;中间overflow:hidden;方法四:父元素display:flex 中间设置flex: 1;...原创 2020-06-28 21:26:32 · 118 阅读 · 0 评论 -
vu的图片渲染问题
左边的服务类型:使用v-for渲染页面布局:左中右的 父级flex布局 并且设置justify-content: space-between;中间文字长短不一,不会出现三个都是左对齐需要给左边的img和中间的文字一起加一个div 让他flex布局右边的应用统计:没有使用v-for 直接拿数据右边的服务监控:flex布局 一个title+4个盒子 给title的width:100% 独占一行 就可以让四个盒子flex布局图片渲染如果是下面的代码是不管是网址路径还是本地原创 2020-06-03 14:02:55 · 209 阅读 · 0 评论 -
使用背景图片显示不出来,也不报错的原因
开始用的relative与absolute不太好调整,后来用背景图片就好设置了。background: url(…/images/round-orange.png) no-repeat;…/images/round-orange.png是本地地址不加no-repeat的话会出现重复图片不容易去掉/*css部分:*/.round-text-box { width: 120px; height: 90px;} .round-text-box .round-text-orange { c原创 2020-05-28 10:35:30 · 961 阅读 · 0 评论 -
transition与animation的区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js。其实通常情况下,对于使用js我们更加倾向于使用css来设置动画。transfrom就不用说了,它本身就一个css属性。transition 是可以为一个或者多个用数值表示的CSS属性发生变化时添加动画效果。.demo{overflow: hidden;width: 10...转载 2020-04-16 20:31:12 · 351 阅读 · 0 评论 -
清除浮动
清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题1.如下,我给父盒子设置一个boder,内部放两个盒子一个big 一个small,未给big和small设置浮动,则他们会默认撑开父盒子2.当我给内部两个盒子加上float属性的时候顶部深蓝色盒子就会顶上来,然后父盒子因为没设置高度,变成一条线,big和small已经浮动了总结一下:当父元素不给高度的时候,内...转载 2020-04-16 00:08:46 · 129 阅读 · 0 评论 -
a:link,a:visited,a:hover,a:active 分别是什么意思?
link:连接平常的状态visited:连接被访问过之后hover:鼠标放到连接上的时候active:连接被按下的时候正确顺序:“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .因为当鼠标经过未访问的链接,会同时拥有a:link、a:hover两种属性,a:link离它最近,所...转载 2020-04-07 12:02:25 · 2417 阅读 · 0 评论 -
左边定宽右边自适应
方法一:左边设置左浮动,右边宽度设置100%.left{ float: left; }.right{ width: 100%; }方法二: 父容器设置 display:flex;Right部分设置 flex:1对父元素设置为弹性盒子(flex布局),其子元素可以通过设置 flex 的数值来控制所占空间的比例。body{ display: flex; ...原创 2020-04-01 22:18:16 · 127 阅读 · 0 评论 -
opacity:0,display:none和visibility:hidden的区别
opacity:0隐藏起来的元素是占空间的,并且绑定的事件仍然会触发。visibility:hidden隐藏起来的元素是占空间的,并且绑定的事件不会触发。1、visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别...转载 2020-03-30 23:57:26 · 157 阅读 · 0 评论 -
HTML/CSS实现文字环绕图片布局
1.CSS 利用float: left<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aaa{ width: 500px }...原创 2020-03-27 14:15:32 · 2857 阅读 · 0 评论 -
水平/垂直居中
一. 水平居中1.1行内或类行内元素(比如文本和链接)在块级父容器中让行内元素居中,只需使用 text-align: center;:这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。1.2 块级元素让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto(前提是已经...转载 2020-03-03 23:32:01 · 100 阅读 · 0 评论 -
CSS3-3D
一.平移translate3d()/*transform: translate3d(x,y,z); x和y可以是px可以是% z只能是px*/ transform: translate3d(100px,100px,300px);二.翻转rotate()要翻转效果一定要给父元素设置perspectivebody{ 对父元素设置 perspective: 500px...原创 2020-03-01 21:44:52 · 86 阅读 · 0 评论 -
CSS3-2D
一.兼容性问题:div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } 二.涉及到的代码border-radius:...原创 2020-03-01 21:25:34 · 99 阅读 · 0 评论 -
CSS画图
一. 梯形1.1 画一个正方形(边长100px)边框,边框宽度为10pxwidth: 100px;height: 100px;border: 10px solid red;效果图:这里的border平均分配如下图所示:1.2 画出梯形1.2.1 思路一将其余三条边隐藏即可 简洁写法 width: 100px; height: 100px; bor...原创 2020-02-28 16:51:28 · 370 阅读 · 0 评论 -
CSS-优先级
直观行内样式>内联样式=外联样式!important > 行内样式>ID选择器 > 类选择器 =伪类选择器=属性选择器> 元素选择器=伪元素选择器 > 通配符选择器> 继承 > 浏览器默认属性!important申明的优先级最高就近原则(最晚声明的生效)微观!important权重最高 1,0,0,0,0行内样式 0,1,0,0,...转载 2020-02-27 22:07:26 · 171 阅读 · 0 评论 -
CSS-选择器
1.简单的选择器1.1. ID选择器#happy { color:red;}1.2. 类(class)选择器.btn { color:red;}1.3. 元素选择器(又称类型选择器)div { color:red;}1.4. 全局(通配符)选择器* { color:red;}2.复杂的选择器2.1.子选择器(#nav>p,...转载 2020-02-27 21:45:54 · 158 阅读 · 0 评论 -
常见定位方案(三种文档流)
定位方案(文档流)是控制元素的布局,有三种常见方案:1.普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。普通流其实就是指BFC中的FC2....原创 2020-01-08 16:23:52 · 1029 阅读 · 0 评论 -
CSS的三种样式
内联样式: 把css代码直接写在现有的HTML标签中嵌入式: 把css样式代码写在style标签之间外部式: 把css代码写一个单独的外部文件(.css为扩展名)中,在head标签中通过link标签链入文件在,如下面代码:三种样式优先级:内联式 > 嵌入式 > 外部式(一般情况下),满足就近原则:谁离被设置的元素越近谁就优先级越高,这里离得近是看在嵌套的第几层 而不是代码离得近...原创 2020-01-08 16:17:32 · 128 阅读 · 0 评论 -
BFC
一、常见定位方案(文档流)在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案(文档流)是控制元素的布局,有三种常见方案:1.普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位...转载 2020-01-06 21:42:23 · 144 阅读 · 0 评论 -
inline-block消除间隙
一、inline-block呈现效果的现象描述**真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:二.消除间隙的多种方法**(1)内联样式的处理消除间隙一:消掉空格的三种方法<div class="space"> <a href=""> a1</a><a href...转载 2020-01-06 16:07:12 · 234 阅读 · 0 评论 -
行内元素和块级元素的区别?inline-block与float(面试题目)
一.行内元素与块级元素**1.行内元素(inline)****:在一条直线上排列,默认宽度只与内容有关块级元素(block):垂直排列,独自占据一行,默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关**2.包含关系:**块级元素可以包含行内元素和块级元素,但行内元素不能包含块级元素,只能包含文本或者其它行内元素3.行内元素与块级元素属性的不同:主要是盒模型属性上,行内元...转载 2020-01-05 18:12:46 · 338 阅读 · 0 评论 -
盒模型
#1.盒模型的组成:由里到外分别是content(内容),padding(内边距),border(边框),margin(外边距)**#2.盒模型的两种标准:**标准模型 和 IE模型#3.标准盒模型与IE盒模型的区别:标准盒模型的width/height指的是content(内容)的宽高,而IE盒模型的width/height指的是content(内容)+padding(内边距)+bo...原创 2020-01-05 16:45:42 · 127 阅读 · 0 评论