![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
在下平兄
这个作者很懒,什么都没留下…
展开
-
定位
文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。关于定位我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。absolute...原创 2019-07-24 08:53:14 · 84 阅读 · 0 评论 -
布局练习
1、特征布局:翻页(所需知识点:盒模型、内联元素)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> ul{ w...原创 2019-07-24 14:43:55 · 226 阅读 · 0 评论 -
css基础
介绍CSS 层叠样式表,为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了css,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。css页面引入方法1、外联式:通过link标签,链接到外部样式表到页面中。<link rel="stylesheet" type="tex...原创 2019-07-21 09:34:04 · 585 阅读 · 0 评论 -
盒子模型
1.宽高属性宽度 width:长度值 | 百分比 | auto 最大宽度 max-width:长度值 | 百分比 | auto最小宽度 min-width: 长度值 | 百分比 | auto注意: 宽和高只这只一个时,另一个自动为auto2.边框borderborder-top-color:red; 边框颜色border-top-width:10px; 边框粗细border...原创 2019-07-21 18:40:15 · 103 阅读 · 0 评论 -
水平居中和垂直居中方法总结
水平居中1、行内元素:将父元素设为:text-align:center2、不定宽块级元素:设置display:inline和父级text-align:center3、定宽块级元素:设置margin:auto4、相对父元素绝对定位父元素:position:relative;子元素:position: absolute;left:50%;margin-left:-50px;(自身宽度...原创 2019-07-26 08:42:33 · 206 阅读 · 0 评论 -
css3动画
transition动画transition动画突出一个过渡效果1、transition-property 设置过渡的属性,比如:width height background-color2、transition-duration 设置过渡的时间,比如:1s 500ms3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲...原创 2019-08-03 18:17:38 · 277 阅读 · 0 评论 -
块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。块元素块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:支持全部的样式如果没有设置宽度,默认的宽度为父级宽度100%占据一行、即使设置了宽度行内元素行内元素,布局中常用的标签如:a、sp...原创 2019-07-22 15:43:32 · 250 阅读 · 0 评论 -
浮动布局
浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来3、相邻浮动的块元素可以并在一行,超出父级宽度就换行(常用于制作导航栏)4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的...原创 2019-07-23 09:04:54 · 221 阅读 · 0 评论 -
css3 h5新增内容
CSS3新增选择器1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){ background-color:red; }</style>......<div class="list">...原创 2019-08-15 18:11:30 · 98 阅读 · 0 评论