★ CSS
路飞小朋友
这个作者很懒,什么都没留下…
展开
-
12个HTML和CSS必须知道的重点难点问题
这12个问题,基本上就是HTML和CSS基础中的重点难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮动也是一个大坑,有很多细节。这12个知识点是我个人认为的,下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV,垂直水平居中?使用Flex只需要在父盒子设置:display: flex; justify-content: center;align-items: center;使用 CSS3 transform父盒子设置:posit转载 2020-06-11 13:07:46 · 355 阅读 · 0 评论 -
CSS组件:字体图标
字体图标就是文字,只是这种文字长得和图标一样字体图标优缺点字体拥有的属性(字体大小、颜色等),均适用于字体图标具有矢量性,无限放大也不会有马赛克,保证清晰度字体图标大小相对于图片要小很多,加载快,灵活字体图标只能是单一颜色,图片可以多种颜色混合fontawesome使用步骤下载解压将css和webfonts移动到项目中使用link将all.css引入网页...原创 2020-06-21 21:50:57 · 1012 阅读 · 0 评论 -
CSS布局:position定位
定位和浮动区别(重点)float 浮动浮动元素会脱离文档流,但不会脱离文本流,浮动只有左右浮动float 元素会浮起来,具有行内块的特点,但只能浮到第二层,表现为并列position 定位相对定位会浮起来,但不会脱离文档流和文本流,元素原本的位置会被保留,不会变为行内块绝对和固定定位会浮起来,脱离文档流和文本流,会变为行内块元素position 定位元素会浮起来,但会浮到不同层,后定位的元素永远比先定位的元素层级高(未使用没有z-index的情况下),表现为层叠position 属性原创 2020-06-11 19:50:31 · 345 阅读 · 0 评论 -
CSS布局:float浮动
浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来3、相邻浮动的块元素可以并在一行,超出父级宽度就换行(常用于制作导航栏)4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果6、父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开父元素【原创 2020-06-14 05:58:39 · 900 阅读 · 0 评论 -
CSS布局:文档流
文档流的特性文档流中,行内及行内块元素默认从左到右流,遇到阻碍或者宽度不够自动换行,继续按照从左到右的方式布局。块级元素单独占据一行,并按照从上到下的方式布局空白折叠现象,无论多少个空格、换行、tab,都会折叠为一个空格,想让 span 标签之间没有空隙,必须紧密连接同一行中,高矮不齐,底边对齐,如 span文本会和图片的最下端对齐元素中的如果有英文文本会出现不能自动换行的情况,原因是英文文本之间没空格,浏览器会认为这是一个长的单词脱离文档流,可以理解为元素已经不属于这个文档了,在它的上一层,也原创 2020-06-10 15:18:17 · 642 阅读 · 0 评论 -
CSS布局:盒子模型
盒子模型概述 link盒子组成,包括元素内容、内边距、边框 和 外边距内边距、边框和外边距都是可选的,默认值是零,可以应用于一个元素的所有边,也可以应用于单独的边外边距可以是负值,而且在很多情况下都要使用负值的外边距width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响盒子的容积,但是会增加盒子的总尺寸盒子自身的尺寸:内容的宽高+两侧内边距+两侧边框盒子在页面中占位的尺寸:内容的宽高+两侧内边距+两侧边框+两侧外边距宽高属性 link宽度 width:原创 2020-06-09 18:03:29 · 306 阅读 · 0 评论 -
CSS属性:元素隐藏
overflow 属性处理超出范围的文本内容常用属性值visible 默认值,溢出内容不会被修剪,会呈现在元素框之外hidden 不显示溢出的内容scroll 滚动条来显示元素内溢出的内容,即使没有溢出也显示滚动条auto 自动地处理溢出,如果溢出则显示滚动条,如果没溢出,则正常显示代码示例<style type="text/css"> div{ width: 100px; height: 100px; backgro原创 2020-06-25 21:13:49 · 277 阅读 · 0 评论 -
CSS属性:vertical-align详解
文章推荐 link1 link2 link3Vertical-align属性Vertical-align被用于垂直对齐inline元素,inline-block元素,以及inline-table的元素inline元素基本上指的就是文本,inline-block元素基本上指图片,inline-table基本上指的表格对齐inline元素基本介绍baseline:将元素x的基线与其父元素x的基线对齐middle:将元素行高的中间与父对象x的基线对齐,再加上父对象的x高度的一半top:将元素原创 2020-06-22 14:42:32 · 991 阅读 · 0 评论 -
CSS属性:列表和表格
CSS 列表属性 linklist-style 简写属性,把所有用于列表的属性设置于一个声明中list-style-image 将图象设置为列表项标志list-style-position 设置列表项标志的位置(li内外)list-style-type 设置列表项标志的类型,none 无标记<style> ul{ list-style:square inside; }</style><body><ul>原创 2020-06-25 20:57:04 · 183 阅读 · 0 评论 -
CSS属性:背景和精灵图
CSS 背景属性常用属性background 属性连写background-color 设置元素的背景颜色background-image 把图像设置为背景background-attachment 背景图像是否固定或者随着页面的其余部分滚动background-position 设置背景图像的位置background-origin 设置背景图片偏移量的原点background-repeat 设置背景图像的重复方式background-size 设置背景图片的尺寸background-原创 2020-06-23 18:07:51 · 588 阅读 · 0 评论 -
CSS属性:文字与文本
CSS 字体属性 link常用属性font 属性连写 至少要有字号和字体和行高font-family 设置文字的字体,如:font-family:'微软雅黑';font-size 设置文字的大小,如:font-size:12px;font-style 设置字体是否倾斜,如:font-style:'italic';font-weight 设置字体的粗细,如:font-weight:bold;建议不要简写font属性连写必须要写 字体大小,行高,字体族简写时,行高实际可以不写,但系统会默原创 2020-06-22 17:30:10 · 213 阅读 · 0 评论 -
CSS基础:伪类选择器
伪类 link伪类是给页面中已经存在的元素添加一个类。伪类用来描述一个元素的特殊状态,如:第一个子元素,鼠标点击的元素,鼠标移入的元素常用伪类属性:active 向被激活的元素添加样式:focus 向拥有键盘输入焦点的元素添加样式:hover 当鼠标悬浮在元素上方时,向元素添加样式:link 向未被访问的链接添加样式:visited 向已被访问的链接添加样式:first-child 向元素的第一个子元素添加样式伪类选择器处理超链接给超链接不同状态添加不同的颜色或样式a:hove原创 2020-06-12 22:50:44 · 449 阅读 · 0 评论 -
CSS基础:基础知识
css介绍css 是层叠样式表,他的作用是用来规定 div 和 div 中内容的位置和样式html 只负责文档的结构和内容,表现形式完全交给css,html文档变得更加简洁css 三大特性层叠性层叠性是指当一个标签被设置了多个重复的样式的时候,一个属性会覆盖另外一个属性层叠性主要遵循的原则是:优先级的情况下,就近原则,否则以优先级高的为准继承性继承性是指当子标签没有设置样式时,会继承父标签的样式text-,font-,line-这些元素开头的都可以继承,以及color属性子标签原创 2020-06-05 18:42:00 · 420 阅读 · 0 评论