摘要: box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box、border-box、inherit。 其中inherit表示box-sizing的值应该从父元素继承。 content-box和border-box的主要区别就是元素的width 阅读全文
posted @ 2018-04-18 22:00 蓝色眼泪1 阅读(314) 评论(0) 推荐(0) 编辑
摘要: 作用:通过给元素添加animation属性,可以赋予该元素动画效果。 <!DOCTYPE html><html> <head> <style> div{width:100px;height:100px;background:red;animation:my 5s;} @keyframes my { 阅读全文
posted @ 2018-04-02 00:02 蓝色眼泪1 阅读(987) 评论(0) 推荐(0) 编辑
摘要: background-origin用来规定元素背景图像的相对定位位置,它有三个属性值: 1、border-box border-box表示元素背景图像相对于border区域开始定位。 代码如下: 效果如下: 从上图可以看出,元素的背景图像从边框区域开始定位。 2、padding-box paddin 阅读全文
posted @ 2018-03-30 19:57 蓝色眼泪1 阅读(782) 评论(0) 推荐(0) 编辑
摘要: background-clip属性的通俗作用就是指定元素背景所在的区域,有四种取值 1、border-box border-box是默认值,表示元素的背景从border区域(包括border)以内开始保留背景。 简单代码如下: 效果如下: 从上图我们可以看出,元素背景默认是存在于边框及以内的区域,但 阅读全文
posted @ 2018-03-28 19:54 蓝色眼泪1 阅读(11122) 评论(0) 推荐(1) 编辑
摘要: css中许多的属性都需要添加长度,而长度一般由数字和单位构成,如1px,1.5em,2vh;也可以省略单位,如line-height:1.5,表示行高为字体大小的1.5倍; 长度单位一般也分为相对长度和绝对长度。 (一)绝对长度 顾名思义指的是一个固定的值,它并不随着外部环境的改变而改变(屏幕大小, 阅读全文
posted @ 2018-03-20 20:46 蓝色眼泪1 阅读(223) 评论(0) 推荐(0) 编辑
摘要: max-width:从字面意思可以看出,是规定元素本身最大宽度,元素本身宽度应小于等于最大宽度值。 min-width:从字面意思可以看出,是规定元素本身最小宽度,元素本身宽度应大于等于最小宽度值。 1、max-width 一般我们在布局时,不想要元素的宽度限定死,并且想要它的实际宽度随其本身内容自 阅读全文
posted @ 2018-03-19 22:35 蓝色眼泪1 阅读(5063) 评论(1) 推荐(2) 编辑
摘要: 在网站编写的时候,由于许多的标签会有默认存在的样式,比如P标签的外边距,a标签的下划线等等,通常我们会把这些默认样式去除,以免在后面的编写中造成诸多的不变。 1、拥有默认内外边距的标签 有些人会图省事,清除内外边距直接用*{margin:0;padding:0;},这样子写,在项目很小的时候,你会感 阅读全文
posted @ 2018-03-18 16:55 蓝色眼泪1 阅读(407) 评论(2) 推荐(1) 编辑
摘要: map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档。 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,us 阅读全文
posted @ 2018-03-17 19:13 蓝色眼泪1 阅读(7655) 评论(2) 推荐(3) 编辑
摘要: 问题:自适应高度的块级元素内添加图片后,其高度会比图片高度多出一块 简单代码如下: 效果图如下: 1、我们可以发现div的高度比图片的高度多出来了几个像素,这是为什么呢? 这是因为img标签为行块级标签,它既有块级标签的特性,也有行级标签的特性。这就需要我们理解行级标签中vertical-align 阅读全文
posted @ 2018-03-15 20:31 蓝色眼泪1 阅读(383) 评论(0) 推荐(1) 编辑