Web/ CSS 基础知识 - 随笔分类 - 夜之独行者

animation 动画

摘要：动画常用属性参照https://www.w3school.com.cn/css3/css3_animation.asp 1.平移、旋转、缩放 @keyframes move { 0% { transform: rotate(0deg); } 25% { transform: translate(44 阅读全文

posted @ 2020-09-07 18:48 夜之独行者阅读(245) 评论(0) 推荐(0)

2D transform

摘要：1.过渡 transition transition: 要过渡的属性花费的时间运动曲线经过多久开始执行过渡效果 .transition { background: red; width: 100px; height: 100px; /* 谁过渡给谁加 transition */ transit 阅读全文

posted @ 2020-09-03 08:55 夜之独行者阅读(186) 评论(0) 推荐(0)

标签的显示和隐藏

摘要：1.　display 隐藏元素以后不再占有原来的位置 display: none; 隐藏标签 display: block;显示隐藏标签 2.　visibility：隐藏标签以后继续占有原来的位置 visibility: hidden; 隐藏元素 visibility: visible；显示隐藏元素阅读全文

posted @ 2020-08-31 15:32 夜之独行者阅读(317) 评论(0) 推荐(0)

定位 position

摘要：position 属性规定元素的定位类型。 position属性定义建立元素布局所用的定位机制。任何元素都可以定位，绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。定位 = 定位类型（relative，absolute， fixed， s 阅读全文

posted @ 2020-08-31 15:11 夜之独行者阅读(77) 评论(0) 推荐(0)

float 浮动

摘要：浮动： 1.可以改变标签的默认排列方式； 2.可以让多个块级标签在同一行内显示； 3.设置浮动的元素脱离标准流，移动到指定的位置（比如：float：left），浮动的标签不再保留原来的位置； 4.具有行内块的特性；一、当标签（块级标签、行内标签）添加了浮动属性，则不需要转行display就可以设阅读全文

posted @ 2020-08-28 12:34 夜之独行者阅读(115) 评论(0) 推荐(0)

盒子模型

摘要：margin 设置盒子的外边距，即控制盒子与盒子之间的距离; margin-top: 10px; margin-bottom: 10px; margin-left: 40px; margin-right: 40px; /* 合并写法：上下左右 */ margin: 10px 40px; mar 阅读全文

posted @ 2020-08-21 19:13 夜之独行者阅读(113) 评论(0) 推荐(0)

CSS 三大特性

摘要：CSS 三大特性：层叠性、继承性、优先级层叠性：同一个选择器设置相同的样式，此时就会发生样层叠，即样式覆盖。相同的样式后执行的样式起作用（样式代码行数大的起作用） div { color: red; color: blue; } <div> 我显示的字体颜色是蓝色 </div> 继承性：子标签阅读全文

posted @ 2020-08-18 17:27 夜之独行者阅读(192) 评论(0) 推荐(0)

background 背景设置

摘要：background属性如下：属性作用值例 background-color 设置背景颜色 rgb/16进制/color div{background-color: red} background-image 设置背景图片 url(图片路径) div{background-image: ur 阅读全文

posted @ 2020-08-18 15:46 夜之独行者阅读(201) 评论(0) 推荐(0)

CSS 选择器

摘要：后代选择器（包含选择器）：（元素1 元素2 { 样式声明 }）可以选择父元素里面的子元素。把外层标签写在前面，内层标签写在后面，中间用空格分隔。（当标签发生嵌套时，内层标签为外层标签的后代） div span { text-align: center } <div> <span>span标签通过后代阅读全文

posted @ 2020-06-02 17:22 夜之独行者阅读(187) 评论(0) 推荐(0)

字体、文本属性

摘要：字体属性 font-family 设置文本的字体属性例如：p {font-family: "Microsoft Yahei"} font-size 设置字体大小例如：div {font-size: 16px} font-weight 设置字体粗细例如：div {font-weight: 700 阅读全文

posted @ 2020-06-01 17:16 夜之独行者阅读(108) 评论(0) 推荐(0)

flex 布局

摘要：一、布局原理: 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。二、注意点: 1、任何一个容器都可以指定为 Flex 布局。 2、父容器设为Flex布局以后，子项目的float、clear和vertical-align属性将失效。 3、Webkit 内核的浏览器，必须加上-webkit 阅读全文

posted @ 2019-11-07 17:49 夜之独行者阅读(171) 评论(0) 推荐(0)

随笔分类 - Web/ CSS 基础知识