CSS
文章平均质量分 60
Talon不会写代码
I'm just a lonely loner on a lonely road alone.
展开
-
响应式布局——CSS Media Query
前言现在越来越多的人使用手机平板等移动设备来浏览网站,所以网站开发中响应式布局非常重要。下面记录一个简单的响应式布局方案,使用 HTML+CSS 来实现,(CSS Media Query)。并附上一个响应式简单博客。实现原理本次记录的响应式开发原理非常简单,就是通过用户浏览器的尺寸来判断设备类型,然后根据不同的设备显示不同的 CSS 样式。实现方法首先创建 html 文件,然后引入...原创 2018-10-02 20:34:53 · 518 阅读 · 0 评论 -
CSS隐藏元素 display:none 和 visibility:hidden 区别
display 属性设置一个元素如何显示,visibility 属性指定一个元素可见还是隐藏。CSS 常用隐藏元素的方式有两种,分别是 display:none 和 visibility:hidden。但是这两种方式有一些区别:visibility:hidden 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。display:...原创 2018-11-21 21:44:08 · 508 阅读 · 0 评论 -
CSS边框(Border)
边框样式边框样式属性指定要显示什么样的边界。border-style属性用来定义边框的样式边框宽度可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等);或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。例如p.one {...原创 2018-11-19 14:21:13 · 475 阅读 · 0 评论 -
CSS轮廓(outline)属性详解及 outline 与 border 的区别
轮廓(outline)轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。简写格式:outline: outline-color outlin...原创 2018-11-19 23:08:40 · 3833 阅读 · 0 评论 -
CSS盒子模型(Box Model)
CSS盒子模型(Box Model)所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):不同部分的说明:Margin(外边距) - 清除边框外...原创 2018-11-17 20:56:43 · 328 阅读 · 0 评论 -
CSS解决border影响元素宽高的问题(box-sizing属性)
问题我们在用 CSS 进行页面布局时,经常会给元素指定宽高。在没有边框时(border为0)往往父元素的宽高是子元素宽高的和。但是在添加边框宽度后如果不调整元素宽度,会导致布局错乱。例如我们想要下面这样的效果:一个宽度为 600px 的父元素下有三个 200px 的子元素。可以这样实现:<body> <div class="container"> ...原创 2018-12-10 20:00:03 · 14101 阅读 · 0 评论 -
CSS中多个class的优先级
在网页中为元素添加样式时,经常会用到多个 class 属性。那他们之间的优先级关系是怎样的呢:当一个元素指定多个 class 时,class 的优先级与指定顺序无关,而是和 class 的定义顺序有关。后声明的优先级高。比如一个按钮,我们写的通用属性是:.bt { border: 1px solid; border-radius: 5px; box-sizing: border-b...原创 2018-12-10 20:30:25 · 13481 阅读 · 2 评论 -
【CSS】box-sizing属性
此属性有两个可取值:content-box(默认) 和 border-boxbox-sizing 属性可以被用来调整这些表现:content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。 也就...原创 2019-04-02 15:53:19 · 151 阅读 · 0 评论 -
【CSS】padding属性的多值简写(1-4个值)
padding:10px;:上下左右的值都为 10pxpadding:5px 10px;:上下 5px,左右 10pxpadding:5px 10px 15px;:上 5px,左右 10px,下 15pxpadding:5px 10px 15px 20px;:上 右 左 下(从上开始顺时针)...原创 2019-04-02 16:12:56 · 2262 阅读 · 2 评论