网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > css
  • 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
  • padding百分比基于什么?

    padding百分比基于什么? padding值为百分比时,其值是基于其父元素的宽来定义的; 我们先来看一段引用W3c的表述: The percentage is calculated with respect to the width of the generated boxs containing block. Note that this is true for margin…

    2021/9/2 21:04:43
  • css3 @media媒体查询示例

    有的朋友以前没有接触过css3的@media媒体查询,不知道@media媒体查询怎么使用,如何写,今天我们就拿一个实际的例子,来说说@media媒体查询怎么使用?<!DOCTYPE html><html><head><title>css3 @media媒体查询示例--www.woaidaogu.com</title&…

    2021/9/2 20:59:39
  • padding:10px 20px 30px 设置的顺序是什么?

    我们知道css padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。 padding三个值 padding:10px 20px 30px;为三个值时它设置的顺序是: 上填充是 10px 右填充和左填充是 20px 下填充是 30px padding四个值 padding…

    2021/8/31 21:04:53
  • css opacity设置父元素透明度导致子元素不能正常显示

    今天做页面有这样一个需求,就是父元素设置透明度opacity:0.5,但要求子元素显示正常,而不需要和父元素一样透明,我使用了以下几种方法试图去解决,但结果都不行。 1、设置子元素的透明度属性为opacity:1,但结果显示还是和父元素一样的透明度。也就是说不论子元…

    2021/8/31 20:58:10
  • css3 @media媒体查询常见的操作符

    css3@media媒体查询常见的操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询,今天我们就来介绍一下@media媒体查询常见的几个操作符。and  and操作符用来把多个媒体属性组合起来,合并到同一条媒体查询中。只有当每个属性都为真时,这条查询的结果才为真  [注…

    2021/8/31 20:53:40
  • css3媒体查询的写法

    使用CSS3中媒体查询的大致思路就是判断网页在不同设备中所处的宽度范围,这样的范围可能有三种(PC、平板、手机),也可能有四种(PC、平板、中大屏手机、小屏手机),当然也可能只需要两种(平板、手机,PC端单独开发一版时可不作为CSS3媒体查询的使用对象),并为各种宽…

    2021/8/31 20:47:25
  • css媒体查询常见的媒体类型有哪些?

    使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 …

    2021/8/31 20:42:20
  • css定义变量的浏览器兼容性

    基本上能兼容大部分主流浏览器,直接使用没有太大问题 如果想使用但又想兼容所有浏览器,就是用下面的方法检测浏览器是否支持CSS自定义属性的方法/*css*/@supports ( (--a: 0)) { /* supported */}@supports ( not (--a: 0)) { /* not supported */}// Jsif (…

    2021/8/29 14:44:03