![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
#css3
chenyuXYT
山本无忧因雪白头,水本无愁因风起皱。
展开
-
GRID布局(网格布局)的属性和属性值的用法介绍
文章目录GRID布局grid布局预热GRID属性容器属性:添加在容器元素项目属性:添加在子元素上面GRID布局它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器...原创 2020-04-16 23:35:28 · 1739 阅读 · 0 评论 -
css3媒体查询详细介绍和移动端项目准备工作前端小白必备哦!!!
文章目录媒体查询语法设备类型(默认值为all)关键字常见适配范围移动端项目准备工作meta标签的设置重点设置分辨率,PPi,DPI,DPR,物理像素,逻辑像素区别常见单位媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 he...原创 2020-04-15 23:13:01 · 278 阅读 · 0 评论 -
怪异盒模型及弹性盒子详细介绍
文章目录怪异盒模型FLEX布局flex容器属性flex项目属性怪异盒模型box-sizingcontent-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设...原创 2020-04-15 22:50:56 · 320 阅读 · 0 评论 -
css3文本属性、背景属性、颜色模式、图片边框、圆角、盒子阴影、width属性值以及calc方法详解
文章目录CSS3属性文本阴影属性文本换行@font-face背景属性颜色模式图片边框CSS圆角盒子阴影width的属性值css3 calc()方法详解pointer-events:CSS3属性文本阴影属性text-shadow说明:水平、垂直阴影的位置允许负值可进行多阴影设置(逗号分隔的方式)文本换行Word-wrap属性用来标明是否允许浏览器在单词内进行断句,这是为了防止...原创 2020-04-13 23:09:39 · 529 阅读 · 0 评论 -
css动画所包含的属性详细介绍
文章目录css3动画关键帧的定义animation vs transitionanimation简写css3动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。关键帧的定义不同于过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧的话来说,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定...原创 2020-04-08 22:14:51 · 399 阅读 · 0 评论 -
css变形属性和2D功能函数的详细介绍
文章目录变形属性:transform2D2D功能函数2D位移 translate()2D缩放scale()3、rotate()4、skew()变形原点变形属性:transformtransform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能,比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。2D2D...原创 2020-04-07 23:17:22 · 232 阅读 · 0 评论 -
css3渐变属性的简单介绍及应用
文章目录浏览器前缀css3 渐变线性渐变径向渐变重复性渐变浏览器前缀-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器(如Firefox)专属的CSS属性需添加-moz-前缀-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀...原创 2020-04-07 22:59:04 · 343 阅读 · 0 评论 -
css宽高自适应及高度塌陷解决方法
文章目录宽高自适应宽度自适应高度自适应最小高度的自适应浮动元素父元素高度自适应(高度塌陷)高度塌陷的解决方法visibility:hidden/隐藏伪对象选择符宽高自适应 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应。自适应的优点: 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨...原创 2020-04-03 22:14:19 · 332 阅读 · 0 评论 -
CSS定位和元素在浏览器窗口居中的方法以及锚点介绍
文章目录CSS文档流POSTIONposition属性值绝对定位和相对定位的区别包含块定位元素层次关系元素在浏览器窗口居中的方法锚点CSS文档流CSS 有三种基本的定位机制:普通流、浮动流、定位流。POSTIONposition定位属性,检索或设置对象的定位方式position属性值static默认值。位置设置为 static 的元素会正常显示,它始终会处于文档流给予...原创 2020-03-31 22:32:47 · 801 阅读 · 0 评论 -
解析图片内联元素img为什么能直接添加大小
img当作行内块使用,是特殊的存在,其拥有行内块元素的特点。默认情况下img元素的display属性值为inline。内联元素元素的特点之一就是不可一直接添加高宽,大小是由内容撑开的。那么内联元素img为什么能直接添加大小呢?关于img元素为何能直接添加大小的问题我们要从另一个角度对标签进行分类。分为:置换元素和非置换元素非置换元素:不是置换元素的元素都是非置换元素置换元素:...原创 2020-03-27 19:50:40 · 226 阅读 · 0 评论 -
CSS元素类型及元素类型特点的介绍
文章目录元素类型块状元素的特点内联元素的特点可变元素常见的标签块内联元素类型的转换display属性display的属性值补充元素类型根据css显示分类,XHTML元素被分为三种类型: 块状元素,内联元素,可变元素三种类型: 块状元素,内联元素,内联块元素(css2.1增加)块状元素的特点A.块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,B.默认情况...原创 2020-03-26 23:31:07 · 356 阅读 · 0 评论 -
网页新闻列表编写流程和文本溢出变省略号设置
文章目录一.新闻列表的编写流程二.文本溢出overflowwhite-spacetext-overflow三.文本溢出变省略号设置一.新闻列表的编写流程1.结构:如果后面有时间:<li> <a href="#">新闻条</a> <span>2020-03-25</span></li>如果没有时间:<li...原创 2020-03-25 19:39:08 · 254 阅读 · 0 评论 -
margin介绍及网页规划思路
MARGINmargin用法 (外边距、边界)1:margin在元素外围,不会撑大元素的大小2:作用:控制元素与元素之间的间距。3:给单一方向添加marginmargin-left/right/top/bottom4 :margin设置方法:margin:30px; 四周margin:10px 30px; ...原创 2020-03-24 20:23:44 · 765 阅读 · 0 评论 -
css盒模型及padding介绍
盒模型盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白(填充)、边框、边界(外边距)这就是盒模型。...原创 2020-03-24 13:50:38 · 259 阅读 · 1 评论 -
css属性
文章目录CSS属性文本属性1:文本大小 font-size2:文本颜色 color3:文本类型 font-family:字体1,字体2,字体3......4:文字加粗font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/100—900;5:font-style:italic/oblique/normal(取消倾斜,常规显示);6:文字行高 {line-heig...原创 2020-03-20 20:46:22 · 136 阅读 · 0 评论