网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > css
  • 根据窗口大小调用不同css代码的效果如何实现?

    根据窗口大小调用不同css代码的效果以前实现可能会比较费劲,但有了css3之后实现起来就变的很容易了。 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,…

    2021/11/3 21:42:26
  • 通过实例告诉你CSS3伪类和伪元素的区别

    CSS3伪类和伪元素我们经常用到,但二者究竟有什么区别呢?不一定每个人都很清楚,今天我们就通过实例来看看CSS3伪类和伪元素的区别:CSS3伪类 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。 伪类由一…

    2021/10/30 18:47:44
  • 再说css的flex布局

    css的flex布局我们以前介绍过,为了加深大家对它的认识,今天我们再来聊聊css的flex布局,flex弹性布局的原理,相当于在一个容器里面,可以指定容器内部元素的排列方式,比如排列顺序,对齐方式等。 其中具体属性有 flex container的样式display:flex; 变…

    2021/10/7 18:00:01
  • css中清除浮动有什么作用?

    css中我们经常需要清除浮动,那么究竟为什么要清除浮动,清除浮动有什么作用呢,今天我们就来聊聊清除浮动的真正原因,因为浮动元素是脱离文档流的,所以会导致父元素的高度不会被子元素撑开。 清除浮动的方法 1.额外标签法(在最后一个浮动标签后,新加一…

    2021/10/7 17:26:14
  • css nth-child(n)选择器中的n是什么意思?

    我们先来看一个例子<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css nth-child(n)选择器中的n是什么意思?www.woaidaogu.com</title><style> p:nth-child(2){background:#ff0000;}</style><…

    2021/9/18 21:50:08
  • css实现每个段落的首个字加粗变大?

    我们如果要实现一个页面的内容对应的每个段落首个字加粗变大,使用传统方法会比较繁琐,一个一个去改变他们的样式,但使用css的p:first-letter的样式方法就变得很简单了。我们通过以下例子来看看具体如何实现?<!DOCTYPE html><html><head><meta ch…

    2021/9/11 16:49:15
  • CSS实现鼠标滑过表格行变色

    CSS实现鼠标滑过表格行变色的实现很简单,主要是用到了css的:hover选择器,我们来看看具体的实现方法:  <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS实现鼠标滑过表格…

    2021/9/11 16:38:55
  • CSS如何在元素的内容之前添加新的内容?

    这里我们需要用到css的:before选择器向选定的元素前插入内容。使用content属性来指定要插入的内容。我们想实现的效果是给内容中的段落p元素前面增加四个空格,使内容更加清晰排版更好看。我们先来看看下面这个例子:<!DOCTYPE html><html><head><me…

    2021/9/11 16:34:39
  • css样式中div p 和 div>p 和 div+p三者有什么区别?

    我们在定义css样式时经常用到div p 、div>p 和 div+p这三种形式来定义样式,由于形式很接近,所以经常容易搞混,今天我们就来把样式的这三种形式说说清楚。<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css样式…

    2021/9/9 23:13:26
  • css的text-align属性适用于所有元素吗?

    css的text-align属性并不适用于所有元素,.text-align不会作用于块级元素,比如:div 、ul、li。 .text-align作用于文本。 .text-align作用于行内元素。 .text-align作用于图片。 通过以上内容我们知道了css的text-align属性并不适用于所有元素,感谢…

    2021/9/7 22:34:00
  • text-transform属性有哪些值,分别是什么含义?

    css text-transform 属性控制文本的大小写。 包括以下5个属性: 1、none 默认。定义带有小写字母和大写字母的标准的文本。 2、capitalize 文本中的每个单词以大写字母开头。 3、uppercase 定义仅有大写字母。 4、lowercase 定义…

    2021/9/7 22:29:03
  • css text-shadow的偏移属性包括哪些?

    css text-shadow 属性应用于阴影文本。那text-shadow具体都包括那些属性呢?我们通过以下内容来具体了解一下: 举例说明<!DOCTYPE html><html><head><meta charset="utf-8"> <title>text-shadow的偏移属性包括哪些?www.wo…

    2021/9/7 22:19:17
  • 讲述css flex布局最清晰最易懂的一篇文章,没有之一

    flex布局 flex弹性布局的原理,相当于在一个容器里面,可以指定容器内部元素的排列方式,比如排列顺序,对齐方式等 其中具体属性有 flex container的样式 display:flex; 变为弹性盒模型 flex-direction:column/row/row-reverse/colu…

    2021/9/5 12:58:55
  • 清除浮动常用的几种方法

    因为浮动元素是脱离文档流的,会导致父元素的高度不会被子元素撑开,所以需要清除浮动来达到我们想要的效果。 1.额外标签法(在最后一个浮动标签后,新加一个标签) 这个方法的原理相当于在浮动父元素里面加上一个额外标签,让这个标签的高度和浮动的元素高…

    2021/9/5 12:44:01
  • position四个属性值static/relative/absolute/fixed的区别

    static属性 默认值,没有定位,出现在正常的文档流中,忽略top,left,right,bottom,z-index的声明relative属性 生成相对定位的元素,通过left,right,top,bottom的设置,相对于正常位置进行定位,可通过z-index进行层次分级absolute属性 生成绝…

    2021/9/5 12:40:32
  • 内联元素(inline)和块级元素(block)有什么区别?

    什么是内联元素? 内联元素(html规范中的概念)英文:inline element,其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素,通常会涉及到的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界…

    2021/9/5 12:36:29
  • position:absolute和float属性的区别?

    相同点 对内联元素设置float和absolute属性,可以让元素脱离文档流,并且可以设置其宽高。 什么是内联元素? 内联元素(html规范中的概念)英文:inline element,其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻…

    2021/9/5 12:25:01
  • 手机横竖屏自动切换css样式的@media媒体查询代码怎么写?

    我们在适配手机页面时,尤其是手机横屏和竖屏显示的内容布局会有所差别,所以会用不同的样式去定义,今天我们就来看看手机横竖屏css对应的@media媒体查询代码怎么写? /* 设备竖屏时调用该段css代码 */@media all and (orientation : portrait){ body { …

    2021/9/2 21:34:33
  • css常用单位介绍及区别

    css中长度单位可分为两种类型:相对和绝对。 绝对长度 绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器、分辨率、操作系统等。具体单位以及解释如下:px像素 一个像素就相当于我们屏幕中的一个小点,屏幕实际就是由很多个像素点构…

    2021/9/2 21:29:33
  • css变量的继承和作用域

    做前端开发的朋友应该很少使用css变量,不过如果你能灵活运用css变量,将会提高你前端开发的效率,今天我们就来说说css变量的继承和作用域。1. 作用域 使用:root{}来定义全局css变量 想让变量在局部可用,就定义在某个特定的选择器下 还是下面这段代码:ro…

    2021/9/2 21:17:02
共100记录«上一页12345下一页»