CSS
shandamengcheng
这个作者很懒,什么都没留下…
展开
-
CSS小技巧——flex实现元素位置自动更新
今天在写项目的时候,在思考怎么实现把一个图片列表中的点击过的图片隐藏之后,在其下面的图片位置自动更新,后来想到了flex这个神奇的CSS属性。flex + 最大/最小宽高度先来看一个简单的代码:<!DOCTYPE html><html><head> <title></title> <style type="text/...原创 2020-04-28 00:09:20 · 570 阅读 · 0 评论 -
CSS之position定位
在CSS中,使用position属性可以改变元素的定位方式,其取值有以下几种:static relative absolute fixed sticky默认值为static,且适用于所有元素。static 生成正常元素框,位于文档流中;行内元素会生成一个或多个行框随父元素流动relative 相对于正常文本流中的位置偏移一定的距离,元素的大小,形状不发生变化。且原位置空间...原创 2020-03-02 15:12:26 · 241 阅读 · 0 评论 -
CSS之浮动float
浮动1.1 浮动的元素在CSS中,浮动通过float属性实现。取值: left | right | none初始值:none适用于: 所有元素浮动的元素会脱离常规文档流,但是,仍会对常规文档流的布局有所影响。使用浮动的一个独特之处就是:浮动的元素处于单独的平面上,但是对文档中的其他内容仍会有影响。之所以这样是因为,对于文档中浮动的元素,其他内容会围绕浮动的元素流动。可以看到...原创 2020-03-01 15:38:35 · 211 阅读 · 0 评论 -
CSS之字体
字体族字体族使用font-family 属性声明的。适用于所有元素。当我们想要对文档中的字体进行设置时,就可以通过font-family这个属性。通过这个属性,我们可以指定字体。比如:p { font-family:Georgia;}设置之后,用户代理会使用Georgia字体显示文档中所有的p元素。如果用户代理没有找到Georgia字体,那么就会忽略该字体使用默认字体。因此,为了防...原创 2020-02-18 22:26:32 · 746 阅读 · 0 评论 -
CSS之长度单位
CSS之长度单位很多CSS属性要靠长度度量衡才能正确显示元素。因此,CSS中有许多长度单位。CSS中的长度单位分为绝对长度单位和相对长度单位。绝对长度单位英寸(in) 1 英寸为2.54厘米厘米(cm)毫米(mm)四分之一毫米(q)像素(px)主要有以上几种,我们通过程序实例来看看他们不同的效果。<div id = "test"> <p>计算...原创 2020-01-20 18:17:14 · 226 阅读 · 0 评论 -
CSS之应用样式的四种方式
CSS之应用样式的四种方式1. link标签通过link标签链接的样式表不是HTML文档的一部分,但是却供文档使用。这样的样式表称为外部样式表。Web浏览器遇到link标签时,会查找并加载样式表,并渲染HTML文档。属性rel: relation 关系的简称 常用为stylesheethref: 样式表的URL链接 可以是绝对地址 也可以是相对地址type: 文档的数据类型 始...原创 2020-01-12 21:55:28 · 3607 阅读 · 0 评论 -
CSS选择器
CSS选择器选择器基础CSS选择器是由与文档树中所有元素匹配的模式组成。当模式中的所有条件均满足时,选择器匹配,并且规则中的声明将应用于匹配的一个或多个元素。p { color:red;} 这个规则会匹配文档中所有的p元素,并将其中文本的颜色设置为红色。选择器概述一些术语:后代:文档数中的子代,孙子或者更高后代的元素。祖先:元素由于存在嵌套关系,所以一个元素,他可以是文档树中元...原创 2019-11-28 00:26:53 · 111 阅读 · 0 评论 -
CSS之实现按钮hover时边框动态效果
在看书时,突然想到怎样来实现这样的一个效果,记得以前看过一篇文章说用四个div标签在按钮的四周就可以实现。于是自己动手做了一下。实现也很简单,主要就是用一个包含元素包含四个div和一个button元素,包含元素和button元素相同的宽高,另外四个div进行绝对定位。 <div id="buttonTry"> <div id="left"></d...原创 2019-11-10 13:36:35 · 2550 阅读 · 0 评论 -
关于span高度过高,且文字脱离span盒子的原因
首先我们来看问题描述:我设置的span标签时,当设置一个高度之后,发现本该在元素盒子内的文字在外面。再看一下代码:<div class = "commenter"> <img src = "background.png" class = "userImg"> <...原创 2019-11-07 12:40:54 · 2665 阅读 · 0 评论 -
CSS之link 标签与@import 的异同
CSS之link 标签与@import 的异同在CSS中,有两种方式可以在.html文件中引入外部样式表。link 标签常见方式为 :<link rel = "stylesheet" href = "main.css">@import 指令@import url(../main.css)两种方式的异同相同点都可以在.html文件中用来导入外部样式表。...原创 2019-10-12 15:44:47 · 134 阅读 · 0 评论 -
CSS样式之实现水平排列块元素的几种方式
三种实现水平排列块元素的方式1. 使用浮动定位(float).cellDiv { height:300px; /*display:table-cell;*/ float:left; /*display:inline-block;*/ border:1px solid orange; } <div class = "cellDiv">...原创 2019-10-01 16:55:20 · 10474 阅读 · 0 评论 -
CSS之父元素包含浮动子元素
CSS之父元素包含浮动子元素#third { width: 500px; float: left; background: orange; height: 500px; } #forth { width: 400px; h...原创 2019-09-20 17:15:13 · 1232 阅读 · 0 评论 -
CSS样式之外边距折叠
CSS样式之外边距折叠外边距在CSS中,所有元素都是以盒模型的方式展现的,即每个元素都可以看作一个盒子。这个盒子包括元素的内容,内边距,边框,外边距。在CSS规则里,width和height默认表示内容盒子的大小,也就是元素可渲染内容区的宽度和高度。块盒子:即由块级元素生成的盒子。常规块盒子中有一种机制叫做外边距折叠。即,***垂直方向上***的两个外边距相遇时,会折叠形成一个外...原创 2019-09-19 00:15:00 · 214 阅读 · 0 评论 -
CSS样式之层叠、特殊性以及继承
CSS样式之层叠和特殊性层叠CSS中通过层叠的机制来处理多个规则同时作用于一个元素的情况。这是一个非常重要的概念,通过CSS(层叠样式表)的名字就可以得知。层叠的机制: 为不同的规则赋予不同的重要性。这就像是生活中,领导给你分配任务,领导说:“小猪,你去给我倒杯水。” 接着又说:“小猪,你给我拿点吃的。” 你还没走呢,领导又说:“小猪,来给我按按摩。” 小猪没有修过分身术,只能一...原创 2019-09-16 01:30:50 · 216 阅读 · 0 评论 -
通过纯CSS实现文字前添加图片
纯CSS添加图片<ul id = "nav"> <li><a href="#">Home</a></li> <li>Servies</li> <ul> <li>Design</li> <li>Development</li>...原创 2019-09-15 17:01:41 · 7323 阅读 · 0 评论