Css
何极光
何程龙,大学计算机科学与技术专业毕业,现就任前端开发工程师。曾荣获:CSDN博客专家、签约讲师,InfoQ写作社区专家博主,中国开源协会-开发分会管理委员会委员。现主要从事软件开发及软件教育培训,具有丰富的实战经验,善于将复杂问题简单化,擅长Web前端、JavaScript框架、Java并发、C#编程、Python Web、数据库SQL等领域及技术。
展开
-
浅谈CSS中的Position(定位)
文章目录一、position的属性值二、static 定位三、fixed 定位四、relative 定位五、absolute 定位六、sticky 定位七、重叠的元素一、position的属性值position属性指定了元素的定位类型。属性值:staticrelativefixedabsolutesticky元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。二、static 定位HT原创 2020-11-06 11:27:23 · 662 阅读 · 0 评论 -
浅谈nth-child和nth-of-type的区别
前言:本文主要讲解CSS3中nth-child和nth-of-type的区别。文章目录一、概念二、举例三、结论一、概念p:nth-child(1)p:nth-of-type(1)第一个表示选取:第1个子元素,并且是<p>。【顺序优先】第二个表示选取:先找到子元素中的<p>们,然后从中选取第1个。【标签优先】二、举例<!DOCTYPE html><html lang="en"><head> <meta cha原创 2020-11-06 11:07:56 · 625 阅读 · 0 评论 -
Css基础知识以及页面引用
一、CSS 的基础语言以及页面引用CSS 的基本语法 Css 的定义方法是: 选择器 { 属性: 值 ; 属性: 值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样 式属性每个属性有一个或多个值。代码示例: div{ width:100px; height:100px; color:red }Css 页面引入的方法:行内样式/内联样式:通过标签的 style 属性,在标签...原创 2019-04-25 16:04:16 · 310 阅读 · 0 评论 -
Css伪类选择器之状态伪类、目标伪类篇
伪类选择器四、状态伪类 状态伪类主要针对表单进行设计的,由于表单是UI设计的灵魂,因此吸引了广大用户的关注。UI是User Interface(用户界面)的缩写,UI元素的状态一般包括:可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。CSS3新定义了3种常用的UI状态伪类选择器。简单说明如下::enabl...原创 2019-04-27 01:20:49 · 1393 阅读 · 0 评论 -
Css伪类选择器之结构伪类、否定伪类篇
伪类选择器二、结构伪类 结构伪类是CSS3新设计的选择器,它利用文档结构树实现元素过滤,通过文档结构的相互关系来匹配特定的元素,从而减少文档内class属性和ID属性的定义,使得文档更加简洁。 结构伪类有很多种形式,这些形式的用法是固定的,但可以灵活使用...原创 2019-04-26 23:08:23 · 683 阅读 · 0 评论 -
Css伪类选择器之常见形式、动态伪类篇
伪类选择器伪选择器包括伪类和伪对象选择器,伪选择器以冒号(:)作为前缀标识符。冒号前可以添加选择器,限定伪类应用的范围,冒号后为伪类和伪对象名,冒号前后没有空格,否则将错认为类选择器:单纯式,E:pseudo-class{property:value}其中E为元素,E:pseudo-class为伪类名称,property是CSS的属性,value为CSS属性值。例如:a:link{col...原创 2019-04-26 22:30:39 · 1077 阅读 · 0 评论 -
Css透明度、shadow阴影、border-radius属性
一、关于透明度background-color:hsla(0,23%,56%,1);opacity 设置透明度,只能针对整个盒子设置透明度子盒子会继承父盒子的透明度.out{ width: 200px; height: 200px; background: green; border: 1px solid darkgreen; margin: 40px auto; opacity: 0...原创 2019-04-26 01:41:39 · 4910 阅读 · 0 评论 -
Css3属性选择器与伪类选择器
一、属性选择器其特点是通过属性来选择元素,具体有以下 5 种形式:E[attr] 表示存在attr 属性即可;div[class]E[attr=val] 表示属性值完全等于val; div[class=mydemo]E[attr*=val] 表示的属性值里包含val 字符并且在 “任意”位置;div[class*=mydemo]E[attr^=val] 表示的属性值里包含val 字符并...原创 2019-04-26 01:14:07 · 476 阅读 · 0 评论 -
Css定位与background 属性
关于定位我们可以使用 css 的 position 属性来设置元素的定位类型, postion 的设置项如下:relative 生成相对定位元素,元素所占据的文档流的位置不变, 元素本身相对文档流的位置进行偏移。absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位 置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或 者绝对或者固定定位的父级元素来进行定位,如果找不到,...原创 2019-04-26 00:37:23 · 357 阅读 · 0 评论 -
Css 元素溢出与浮动
一、CSS 元素溢出当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式, 设置的方法是通过 overflow 属性来设置。overflow 的设置项:visible 默认值。内容不会被修剪,会呈现在元素框之外hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top 塌陷的功能scroll 内容会被修剪,但是浏览器会显示滚动条以...原创 2019-04-26 00:31:51 · 972 阅读 · 0 评论 -
Css的盒子模型介绍和使用
CSS 的盒子模型介绍和使用1.盒子模型解释元素在页面中显示成一个方块,类似一个盒子,CSS 盒子模型就是 使用现实中盒 子来做比喻,帮助我们设置元素对应的样式。盒子模 型示意图如下:把元素叫做盒子,设置对应的样式分别为:盒子的边框(border)、 盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距 (margin)。2.设置边框设置一边的边框,比如顶部边框,可以按...原创 2019-04-26 00:16:17 · 430 阅读 · 0 评论 -
Css选择器的介绍以及使用
CSS 选择器的介绍以及使用1.标签选择器标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。举例: div{color:red;} <div>....</div> <!-- 对应以上样式 --> <div class="box">....</div> <!-- 对应以上样式 -->2.id 选择器通过 i...原创 2019-04-25 23:52:34 · 384 阅读 · 0 评论 -
导入外部样式表
1:使用<link>标签导入使用<link>标签导入外部样式表文件:<link href="001.css" rel="stylesheet" type="text/css" /> 其中href属性设置外部样式表文件的地址,可以用相对地址,也可以用绝对地址。rel属性定义该...原创 2019-04-08 23:44:22 · 4504 阅读 · 0 评论