![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
Leadingme
干啥啥不行,写bug第一名!
展开
-
css居中总结(行盒(行块盒)水平居中、常规流块盒水平居中、浮动块盒水平居中、绝对定位元素的水平居中....)
定义:居中是指盒子的其包含块中居中行盒(行块盒)水平居中直接设置行盒(行块盒)父元素 text-align:center;常规流块盒水平居中定宽, 设置左右margin为auto;浮动块盒水平居中一般会通过设置magin手动居中绝对定位元素的水平居中定宽,设置左右的坐标为0 (left:0,right:0),将左右的margin设置为auto , (因为不是常规流,所...原创 2020-03-25 09:10:26 · 1366 阅读 · 0 评论 -
css数据链接
数据链接定义定义:将目标文件的数据直接书写到路径位置语法:dataMIME,数据 (MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型)例: <link rel="stylesheet" href="data:text/css,h1{color:bule}">数据链接意义优点:(1)减少了浏览器中的请求,减少请求中浪费的时间 ...原创 2020-03-25 09:06:09 · 869 阅读 · 0 评论 -
css堆叠上下文(堆叠上下文中的元素在z轴上的排列)
定义: 堆叠上下文,它是一块区域,这块区域由某个元素创建,它规定了该区域中的内容在z轴上排列的先后顺序创建堆叠上下文的元素HTML元素(根元素)设置了z-index(非auto值,为auto就是没有创建)数值的 定位元素同一个堆叠上下文中的元素在z轴上的排列从后到前的排列顺序(靠近用户): (1)创建堆叠上下文的元素的背景和边框 (html的背景和边框是排列在最后...原创 2020-03-25 09:02:30 · 647 阅读 · 0 评论 -
css行盒的垂直对齐
多个行盒垂直方向上的对齐给没有对齐的元素(行盒)设置vertical-align垂直方向排列方式预设值:text-top text-bottom middle, 像素值, 百分比图片的底部白边产生原因:img标签为行内元素,默认对其方式为vertical-align: baseline(基线对齐) 。图片默认的垂直对齐方式是基线,基线的位置与字体相关,所以在某些时候,图片...原创 2020-03-25 08:54:51 · 789 阅读 · 0 评论 -
css两栏布局、三栏布局、弹性布局
两栏布局说明:一栏定宽,一栏自适应。这样子做的好处是定宽的那一栏可以做广告,自适应的可以作为内容主体。实现方式: ① float + margin ② 使用position的absolute 例: float+margin <body> <div class="left">定宽</div&...原创 2020-03-25 08:51:58 · 765 阅读 · 0 评论 -
css块级格式化上下文
块级格式化上下文(Block Formatting Context,简称BFC)块级格式化上下文说明定义:一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局不同的BFC区域,它们进行渲染时互不感染创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部块级格式化上下文具体规则创建BCF的元素,它的自动高度需要计算浮动元素– 原因: 为了隔绝内部和外...原创 2020-03-25 08:47:13 · 686 阅读 · 0 评论 -
css的@规则(@import 、 @charset、@font-face...)
@规则的引用情景1.import@import "路径"; 导入另外一个css属性2.charset@charset "utf-8"; 告诉浏览器该CSS文件,使用的字符编码集为utf-8,必须写到第一行3.font-face@font-face{font-family:"iconfont",url("路径")}; 自定义字体Web字体和图标1.Web字体(1)当用户电...原创 2020-03-24 21:40:33 · 824 阅读 · 0 评论 -
css样式高级用法(补充上一篇css常见样式的博文)
透明度 (1)opacity,它设置的是整个元素的透明度(包括内容,边框,内外边距),取值为 0 ~ 1 (2)在颜色位置设置alpha通道(raba) 例: (0,0,0,0.5)盒子的隐藏 (1) display: none 不生成盒子,其他的元素当它不存在 // 不保留其位置 (2) visibility(默认值为visible):hi...原创 2020-03-24 21:38:37 · 757 阅读 · 0 评论 -
css常见的样式(font-style、 text-decoration、 line-height...)
color (1)定义:元素内部元素的文字颜色 (2)预设值: 定义好的单词 、三原色,色值 光学三原色(红,绿,蓝),每个颜色可以使用0-255之间的数字来表达 rgb表示法: rgb(255,255,255) hex(16进制)表示法: #红黄蓝(每两位) 淘宝红:#f...原创 2020-03-24 21:30:05 · 1381 阅读 · 0 评论 -
src与href的区别
src与href的区别href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素、@font-face指令。注: src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。...原创 2020-03-24 21:23:46 · 583 阅读 · 0 评论 -
css属性值的计算过程(1.确定申明值 2.层叠冲突 3.使用继承 4.使用默认值)
属性值计算的说明一个元素一个元素依次渲染,顺序按照页面文档的树形目录进行(从上到下)渲染每个元素的前提条件:该元素的所有CSS属性必须有值属性值计算定义:从所有属性都没有,到所有的属性都有属性值,这个计算过程,叫做计算过程。所以说 只有html无法在页面显示属性值计算过程== 总述: 1.确定申明值 2.层叠冲突 3.使用继承 4.使用默认值== (1)确定声...原创 2020-03-24 21:21:33 · 651 阅读 · 0 评论 -
css层叠继承
层叠过程层叠说明:同一个样式,多次应用到同一个元素。为解决声明冲突的过程,浏览器自动处理(权重计算)比较重要性重要性从高到低: (1) 作者样式表中的!important样式 (2) 作者样式表中的普通样式 (3) 浏览器中默认样式表中的样式比较特殊性 总体规则: 选择器选中的范围越窄,越特殊 具体规则: 通过选择器,计算出一个4位数(**...原创 2020-03-24 21:18:02 · 584 阅读 · 0 评论 -
css的相对、绝对、固定定位的详细介绍
定位综述定位:手动控制元素在包含块中的精准位置涉及的CSS属性:positionposition属性 - static(默认值), 静态定位(不定位) - relative: 相对定位 - absolute: 绝对定位 - fixed: 固定元素一个元素,只要position的取值不是static,认为该元素是一个定位元素,定位元素会脱离文档流...原创 2020-03-24 21:12:03 · 850 阅读 · 0 评论 -
css常规流排列和浮动流排序
1.常规流>常规流布局(1) 常规流 文档流 普通文档流 常规文档流。所有元素,默认情况下,都属于常规流布局(2)总体规则:块盒独占一行,行盒水平依次排列>包含块(containing)每个盒子都有自己的包含块, 包含块决定了盒子的排列区域(参考坐标系)。绝大部分情况下,盒子的包含块,为其父元素的内容盒块盒特征每个块盒的总宽度,必须刚好等于包含块的宽...原创 2020-03-24 20:57:48 · 951 阅读 · 0 评论 -
css 块盒模型的类型,组成部分、行盒模型特点,行块盒
1.块盒模型定义:display属性为block的元素1.盒子类型对比 (1)行盒在页面中不换行,块盒独占一行 (2) 默认浏览器样式表设置的块盒:容器元素,h1-h6,p 默认浏览器样式表设置的行盒:span,a,img,video,audio2.块盒的组成部分内容 content定义:内容部分通常叫做整个盒子的内容盒 content.box...原创 2020-03-24 20:24:57 · 1132 阅读 · 0 评论 -
html元素背景设置、字体样式简介、文本各类样式
1. CSS元素背景1.background-color: red; //块颜色背景2.background-image: url(…/img/1.jpg); //图片背景3.background-repeat: repeat-x(沿着x平铺)/repeat-y(沿着y平铺)/no-repeat; //背景图片的重复性4.background-attachm...原创 2020-03-24 18:04:57 · 1504 阅读 · 0 评论 -
css的属性选择器、伪元素及伪类选择器
1. 属性选择器1.基本元素[属性]例: <p title:"qiuqiu">p1</p> p[title]2.基本元素[属性 = 值] (属性只有一个值)例: <p title:"qiuqiu1">p1</p> <p title:"qiuqiu2">p1</p...原创 2020-03-24 17:47:26 · 645 阅读 · 0 评论 -
css前端样式语言的基本原则简介
1. 优先原则后解析的内容会覆盖之前解析的内容(解析器从上往下执行)2. 继承原则嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性3. 优先原则2同一个选择器:从上往下执行、解析同一类型选择器:从上往下执行不同类型的选择器:优先级 先解析 低优优先级的——>高优先级的外部样式和内部样式合并之后一起解析,外部样式放前面 ,内部样式放后面, 外部...原创 2020-03-24 17:35:30 · 1058 阅读 · 0 评论