CSS
文章平均质量分 69
学习css,让你的网页更炫!
前端人
专注前端开发技术分享,助力初学者更好成长
展开
-
flex布局制作自适应网页
网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的,但是特殊布局就不易实现,如垂直居中。flex布局是什么?Flex 是 Flexible Box的简写,意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。采用flex布局的元素,称为flex容器。他的所有子元素自动成为容器成员,称为flex项目,简称项目。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴原创 2021-07-13 09:10:59 · 523 阅读 · 0 评论 -
表格属性及合并
html中我们学习了表格,到网页中只有文字,并不像平时网页中见到的标题头带有背景和边框线的表格,今天我们就学习表格的样式如何设置表格属性表格边框:使用border属性,设置给每一个单元格。table , th , td { border:solid 1px #000;}表格边框合并:添加边框之后,我们发现是双边框,需要用到border-collapse属性合并边框,只能设置到table才能起作用。table{ border-collapse:collapse;}table,原创 2021-07-12 08:49:52 · 1377 阅读 · 0 评论 -
css列表属性和样式控制
如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。列表属性html有三种类型的列表:无序列表,有序列表和自定义列表。设置列表标记有序号,圆点,圆圈,图片等多种形式。list-style:简写属性,用于把下边三个属性声明到一起。list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。 list-style-position : 设置列表中标记项的相对位置。 list-style-ima原创 2021-07-11 15:11:47 · 233 阅读 · 0 评论 -
深度解析CSS中的单位以及区别
css中有几个不同的单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。长度单位可分为两种类型:相对和绝对。绝对长度绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器、分辨率、操作系统等。具体单位以及解释如下:px像素:一个像素就相当于我们屏幕中的一个小点,屏幕实际就是由很多个像素点构成的,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。 mm毫米:这个单位大家常见,不解释。 in英寸:1in = 96px = 2.54cm原创 2021-07-09 17:07:52 · 178 阅读 · 0 评论 -
前端面试题中的“盒模型”是什么?
在进行网页布局时,我们一定离不开盒模型,接下来开始学习什么是盒模型什么是盒模型?css 盒模型(Box Model),在html中任何一个元素都可以看作盒子,这里说的盒子与现实不太一样,css中盒子是二维的,盒子由内到外分四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)。css通过margin、border、padding三个属性来控制盒子,content是html元素的内容。属性介绍margin:是盒子的外边框,包含了上下左右四条原创 2021-07-08 12:56:55 · 234 阅读 · 0 评论 -
css颜色介绍和背景设置
现在美丽网页的设计图中颜色五花八门的,网页模块中漂亮背景图也很多,网页中颜色和背景设置必不可少,接下来我们就先学颜色是如何表达的,要知其然,知其所以然。颜色表达形式1.RGB:rgb( red, green, blue ):每个参数定义了0-255之间的颜色强度。举例: rgb(255,0,0)//红色 rgb(0,0,0)//黑色 rgb(255,255,255)//白色2.RGBA:rgba(red, green, blue, alpha):alpha是0-1透明度设置。0完全透原创 2021-07-07 12:10:18 · 666 阅读 · 0 评论 -
CSS选择器分类
上一节练习题:写两个各10条数据的列表,第一个列表字体是16px,第二个列字体大小是20px。实现方法很多,但是根据现有知识写出来代码会很多,所以今天我们通过学习css选择器来简化你的代码。简单选择器根据标签名、id、类名来选取。id:是标签id的属性值,类名:是标签class的属性值。元素选择器:根据标签名来选择html元素,如p、h1、div、input等待。p{ font-size:16px}id选择器:用于选择一个唯一元素,css使用的时候前边加 # ,后边跟id值。&l原创 2021-07-06 12:23:27 · 95 阅读 · 0 评论