前端技术-CSS
文章平均质量分 93
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化!
Programmer.杨
技术小白~~
展开
-
移动Web之响应式布局
布局特点:响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局需要一个布局容器,结合css的多媒体查询在不同的设备宽度下,一定会产生不同的显示样式。某些元素会隐藏或显示,某些元素会从行内元素变成块状元素传统的开发方式是PC端开发一套,手机端再开发一套,响应式布局相较于传统开发方式优点是只要开发一套就够,缺点就是CSS文件代码量大 <!DOCTYPE html>...原创 2019-12-29 21:22:19 · 577 阅读 · 0 评论 -
移动Web之rem布局
rem布局思想: ① 我们希望网页的宽高、文字等各元素在不同大小的屏幕上同时进行等比例缩放,达到适配移动端多种尺寸屏幕的最好效果 ② 在移动web页面中,由于理想视口的存在且如①所述,故设网页设计宽度(屏幕宽...原创 2019-12-29 21:06:51 · 337 阅读 · 0 评论 -
移动Web之flex布局
Flex布局:Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局给父盒子添加flex属性,来控制子盒子的位置排列方式从而实现flex布局当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效 Flex布局与传统布局和流式布局相比传统布局:兼容性好,布局繁琐,局限性在移动端不能很好布局Flex布局...原创 2019-12-29 20:49:09 · 240 阅读 · 0 评论 -
移动Web之流式布局
布局思想:流式布局,也称百分比布局设置根元素居中,内容向两侧填充通过根容器的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制为了保护内容在合理的范围内在页面中通常限制 max-width 最大宽 min-width 最小宽 <!DOCTYPE html><html lang="zh"><head> <me...原创 2019-12-29 20:37:06 · 252 阅读 · 0 评论 -
CSS3之flex属性
flex属性特点:要在容器中定义flex属性需要在flex容器上使用display:flex属性在flex容器内部没有行内、行内块、块级元素的概念,所有元素皆可设置宽高在flex容器内部拥有主、侧轴(内容排列主方向,辅方向)主要应用于移动端页面或者不考虑兼容的PC端页面 flex容器属性:flex-direction:作用: &n...原创 2019-12-22 16:44:45 · 427 阅读 · 0 评论 -
CSS3之User-Interface属性
box-sizing:作用: 设置盒子尺寸的定义标准,可以以内容区为准,也可以以border为准说明: 可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中常用值:...原创 2019-12-19 22:17:45 · 316 阅读 · 0 评论 -
CSS3之transform属性-3D转换
三维坐标系x 轴:水平向右 – 注意:x轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:z轴往外是正值,往里是负值 3D旋转左手准则左手的手拇指指向旋转轴的正方向其余手指的弯曲方向就是该元素沿着该旋转轴旋转的方向(正值方向) transform:作用:  ...原创 2019-12-18 21:56:02 · 1805 阅读 · 1 评论 -
CSS3之transform属性-2D转换
transform:作用: 该属性可以将元素旋转、缩放、移动、倾斜等说明: 应用于元素的2D或3D转换常用值: &nb...原创 2019-12-18 21:14:57 · 740 阅读 · 0 评论 -
CSS3之animation属性
@keyframes:作用: 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用说明: 动画是通过逐步改变CSS样式的节点来实现的。在一个完整...原创 2019-12-18 20:56:46 · 1113 阅读 · 0 评论 -
CSS3之transition属性
transition:作用: 设置元素当过渡效果,也就是控制元素从一种样式转化到另一种样式的时间、速度变化曲线等属性说明: 如果该属性持续时间为 0,transition不会有任何...原创 2019-12-16 22:37:24 · 393 阅读 · 2 评论 -
CSS3之解决相邻inline-block元素之间空白间隙问题
一、遇到的问题 前些天写瀑布流布局的时候,发现明明计算好了宽度使得一行能放下三张图片,实际效果却总是放不下,图片会挤到下一行去。上图:可以看到,我本来是想要两行图片,每一行是三张。结果现在第一行的图片跑到第二行去了。代码结构很简单:<li> <a></a> &...转载 2019-12-09 15:50:31 · 937 阅读 · 0 评论 -
CSS3之解决相邻border重合加粗问题
解决这个问题的 方法 是 :在 该元素 上设置 相关方向 的 margin为-1px;如果需要 伪类显示 的话,在 该元素的伪类 中加 相对定位,目的是将 被压住 的 border 显示出来如果 还需要 在 此元素 上加 拥有绝对定位的其它元素,那么在 该元素 上加 相对定位,在 该元素的伪类 上加 z-index 属性 下面两个例子就是利用了这个方法!!!代码示例...原创 2019-11-06 22:39:01 · 8861 阅读 · 0 评论 -
CSS3之其他常用属性
display属性作用: 规定元素以何种方式显示说明: 常用于行内、块级、行内块三者转换常用值: &nbs...原创 2019-11-06 18:00:03 · 271 阅读 · 0 评论 -
CSS3之定位及其用法
在CSS中,有 标准流、浮动、定位 三种方式来为网页的布局提供支持 标准流: 它的使用最为普遍,他们根据自身的特性 (行内、块级、行内块) 各自占有网页中的一部分空间。 浮动: 它脱离了标准文档流,它的目的就是将多个块级元素并排放...原创 2019-11-04 22:10:26 · 518 阅读 · 0 评论 -
CSS3书写规范及顺序
使用良好的CSS书写规范来写CSS代码,可以提升代码的阅读体验,这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考 : CSS书写顺序:位置属性(position, top, right, z-index, display, float等)大小(width, height, padding, margin)文字系列(font, line-height, lette...转载 2019-10-28 21:35:12 · 695 阅读 · 0 评论 -
CSS3之浮动及其清除
在网页布局中,我们经常要将多个块级元素无间距地排列到一排,从而进行网页布局,而由于块级元素的特性,在一般情况下这种效果不容易实现!因此就要利用浮动特性!!! 网页布局的三种机制标准文档流: 在不使用float属性...原创 2019-10-27 21:07:33 · 422 阅读 · 0 评论 -
CSS3之盒子模型及其特性
盒子模型在CSS中很重要,它是网页布局的基础!!!先上一个Chrome开发者工具中的盒子模型:由此模型可以看出完整的盒子模型包含以下几部分: 1.content区域:上图中蓝色背景的部分,此部分主要用于盛放具体内容,可能是文本、其他块级元素等 &...原创 2019-10-26 22:35:59 · 1484 阅读 · 0 评论 -
CSS3之background属性
background:作用: 在一个声明中设置所有的背景属性说明: 可以设置的属性分别是:background-color, background-posi...原创 2019-10-24 21:40:26 · 1229 阅读 · 1 评论 -
CSS3之size属性
width:说明: 设置元素的宽度作用: width属性不包括填充,边框,或页边距常用值: &...原创 2019-10-24 10:05:47 · 3315 阅读 · 0 评论 -
CSS3之color属性
opacity:作用:设置一个元素的透明度级别说明:此透明与rgba()不同,opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景,与子元素及里面的内容无关常用值:(0 ~ 1): 从0.0 (完全透明) 到 1.0 (完全不透明) 代码示例:<!DOCTYPE html><html lang="zh"&g...原创 2019-10-24 10:05:07 · 539 阅读 · 0 评论 -
CSS3之border属性
border相关属性需要大量练习,方可运用自如!文字下方有Demo!!!border:作用: 设置在一个声明中 包含 所有 的边框 属性说明: 可...原创 2019-10-24 10:04:26 · 2190 阅读 · 0 评论 -
CSS3之list属性
list-style:作用: 在一个声明中设置所有的列表属性。说明: 按顺序写入各属性:list-style-type, list-style-positi...原创 2019-10-24 10:02:55 · 505 阅读 · 0 评论 -
CSS3之table属性
border-collapse:作用: 设置表格的边框是否被合并为一个单一的边框说明: border-collapse属性,如果没有指定 !DOCTYPE...原创 2019-10-24 10:01:41 · 703 阅读 · 0 评论 -
CSS3之text属性
color:作用: 指定文本的颜色说明: 该属性在块、行内、行内块的样式表中都可以使用,改变被控制元素内部所有文本的颜色关于颜色值的四种写法: ...原创 2019-10-24 10:00:27 · 1083 阅读 · 0 评论 -
CSS3之font属性
font:作用: 在一个声明中设置所有字体属性说明: 可设置的属性是(按顺序): “font-style font-weight font-size/lin...原创 2019-10-24 09:59:27 · 1202 阅读 · 0 评论 -
CSS3之常用选择器
基础选择器标签选择器:作用: 该选择器作用于一种标签 (相同标签名),用于描述一种标签的共有样式用法: 选择器直接写标签名 element...原创 2019-10-20 22:03:40 · 187 阅读 · 0 评论