首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

二、CSS

4、层级选择器 主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。...块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为: 支持全部的样式 如果没有设置宽度,默认的宽度为父级宽度100%...解决内联元素间隙的方法  1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size 内联块元素 内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的...,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。...它们在布局中表现的行为: 支持全部样式 如果没有设置宽高,宽高由内容决定 盒子并在一行 代码换行,盒子会产生间距 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height

1.8K70

css学习笔记,持续记录。

clip-path属性使您可以将元素裁剪为基本形状或 SVG 源,clip-path 将替代废弃的 clip 属性,支持的形状更多。...minimum-scale:允许用户缩放到的最小比例。 user-scalable:用户是否可以手动缩放。...设置hidden; 可以避免父元素被撑开,保证子元素的100%跟父元素一致。 26....解决当父级元素没有高度时,子级元素浮动会使父级元素高度塌陷的问题 解决子级元素外边距会使父级元素塌陷的问题 42. ul list-style失效 默认情况下ul下的li都会自带一个列表样式,如果个ul...但是,当其后代元素的 pointer-events 属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获

2.7K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    寒假提升 | Day6 CSS 第四部分

    写出案例,证明CSS属性的继承性 当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div...,将a的值设置为0 rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素 opacity设置透明度, 设置为0 设置整个元素的透明度, 会影响所有的子元素 五.京东案例 七....的其他值 上下 margin 的传递 margin-top传递 如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的 margin-top 值会传递给父元素 margin-bottom传递...如果块级元素的底部线和父元素的底部线重写,并且父元素的高度是 auto ,那么这个块级元素的 margin-bottom 值会传递给父元素 如何防止出现传递问题?...只设置其中一个元素的margin 上下margin折叠的情况 块级元素的居中 在一些需求中,需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block) 行内级元素(包括 inline-block

    1.3K20

    前端面试之HTML && CSS

    *{margin:0;padding:0;} IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。...margin: 0 auto; (2)绝对定位和margin-left: margin-left: (父width - 子width)/2, 前提是父元素position: relative 对于宽度未知的块级元素...使用table标签(或直接将块级元素设值为 display:table),再通过给该标签添加左右margin为auto。 (2)inline-block实现水平居中方法。...margin实现自适应居中 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中 父级设置相对定位,子级设置绝对定位,并且通过位移 transform...'; /* 设置添加子元素为块级元素 */ display: block; /* 设置添加的子元素的高度0 */ height: 0; /* 设置添加子元素看不见

    4.4K10

    React Native组件篇(一) — Text组件

    'rtl') allowFontScaling:控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放 adjustsFontSizeToFit:指定字体是否随着给定样式的限制而自动缩放 minimumFontScale...默认情况下,文本被按下时会有一个灰色的、椭圆形的高光 selectable:决定用户是否可以长按选择文本,以便复制和粘贴 2、Text组件常用的属性应用Demo Demo代码如下: import React... 我是第三块代码,长按我可以复制我。...总结: 在嵌套的Text组件中,子Text组件将继承它的父Text组件的样式,当使用嵌套的Text组件时,子Text组件不能覆盖从父Text组件继承而来的样式,只能增加父Text组件没有指定的样式。      ...注意点:默认情况下嵌套的Text是不换行的,子控件的内容跟在父控件的后面,加上{'\r'}或者{'\n'}换行显示.

    1.5K30

    CSS布局(二) 盒子模型属性

    的百分比值都是相对于包含块的宽度决定的,常常用于移动端头图  外边距margin 设置外边距margin会在元素外创建额外的空白,空白通常指不能放其他元素的区域,而且在这个区域中可以看到父元素的背景...margin   初始值: 未定义   应用于: 所有元素   百分数: 相对于包含块的width [注意]对于普通元素来说,包含块就是块级父级元素,对于定位元素来说,包含块是定位父级。...所以,普通元素的margin百分比相对于块级父级元素的width,定位元素的margin百分比相对于定位父级的width margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性...【为什么margin:auto无法实现垂直居中】   水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的,如果给宽度设置一个固定值,而左右margin设置为auto,则可以平分剩余空间   垂直方向不可以居中是因为块级元素的高度默认是内容高度...border: 1px red solid; 边框样式   如果一个边框没有样式,边框将根本不会存在   关于虚线dashed,在chrome/firefox下,虚线宽高比是3/1;而在IE下,虚线宽高比为

    1.9K70

    从头学前端-CSS基础03

    ,给父元素添加属性text-align: center --- > 嵌套关系的块级元素垂直外边距的塌陷问题;在父元素和子元素同时具有margin-top属性时,以最大值为准; 解决方式有:给父元素 >...: length 单位是px 或者是百分比> 原理:盒子矩形边框和圆形的交集> border-radius是复合属性,最多可以有四个值,表示四个角;左上、右上、右下,坐下盒子阴影> box-shadow...任何元素都可以浮动,给元素添加了浮动,元素就具有了行内块元素的特性;- 如果行内元素给了浮动,那么行内元素就可以设置高度和宽度- 如果块级元素添加了浮动,且没有设置宽度,那它的大小根据内容而定;-...;- 浮动的盒子只会影响后面盒子的标准流,不会影响前面的标准流;div在服务的盒子前面,还是会独占一行;清除浮动很多情况下,父盒子不方便给高度,但子盒子浮动又不占有位置,最后父盒子的高度是0,就会影响到下面的标准流盒子...;这个时候就需要清除服务,就是清除浮动元素的影响;清除浮动后,父元素就会根据浮动的子元素自动计算高度;语法:图片清除浮动的方法:- 清除浮动的策略是闭合浮动,只让浮动在父元素内影响,不影响父盒子外面的盒子

    68020

    CSS入门?一篇就够了!

    外部样式表(外链式) 链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下: 块元素垂直外边距的合并 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并...由2可以推断出,一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他 子级都需要浮动。这样才能一行对齐显示。 元素添加浮动后,元素会具有行内块元素的特性。...子绝父相 这个“子绝父相”太重要了,是我们学习定位的口诀,时时刻刻记住的。 这句话的意思是 子级是绝对定位的话, 父级要用相对定位。...就是说, 子级是绝对定位,父亲只要是定位即可(不管父亲是绝对定位还是相对定位,甚至是固定定位都可以),就是说, 子绝父绝,子绝父相都是正确的。

    5.2K20

    CSS 实用手册

    外边距的溢出, 特殊场合下,为子元素设置外边距(上下)会作用到父元素上 特殊场合: a. 父元素没有边框(上下) b. 为第一个(最后一个)子元素设置外边距 解决方案: a....当父元素容纳不下所有已浮动子元素,最后一个将换行显示(有可能被卡住) ②. 元素一旦浮动起来后,宽度将变成自适应(非手动指定情况下) ③....基本概念 ①. flex 容器:简称容器,将元素设置为 Flex 容器后,其子元素允许实现灵活的位置摆放 ②. flex 项目:简称项目,存放在 Flex 容器中的内容 (2)....语法 display:value ①. flex 将块级元素 变为 flex 容器 ②. inline-flex 将元素变为行内flex 容器,容器的宽度为子元素的宽度 注意:将元素设置为 flex 布局之后...父元素的高度如果参照上级元素设为100%,那么在弹性布局时,子元素也参照父元素设为100%,子元素将无法显示,解决方案时将子元素设为固定高度 63.

    2.7K10

    CSS第五天-定位

    CSS第五天-定位 静态定位:static 定位的默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来的位置,进行定位 没有脱标,在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...使用,增强网页交互体验 过度所有属性:transition: all 1s === 给盒子添加阴影效果 transition: 过度属性 花费时间(s) 运动曲线 何时开始 可以简写:transition...=== 给其父元素添加text-align: center 块级元素 === 给当前元素设置 宽度和margin: 0 auto 浮动元素 === 给外面标准流的父元素设置 宽度和margin:0 auto...: ellipsis;(规定当文本溢出时,显示省略号来代表被修剪的文本) ---- 边框圆角:border-radius 让盒子四个角变圆润 数字+px 、百分比 (从上、右、下、左) ---- 垂直对齐方式

    2.7K40

    「学习笔记」CSS基础

    「学习笔记」CSS基础 CSS构造块 「1. HTML的局限性」 HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式。...style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。 type=”text/css” 在html5中可以省略。...比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性) 「3....嵌套块元素垂直外边距的合并(塌陷) 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框 父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的较大者 「解决方案:」 可以为父元素定义上边框...特 「特别注意」:浮动元素会改变display属性, 类似转换为了行内块,但是元素之间没有空白缝隙 清除浮动 因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子

    3.2K30

    前端(二)-CSS

    父元素的第一个子元素 E:last-child 父元素的最后一个子元素 E F:nth-child(n) 父元素的第nth的子元素(括号里面的n可以是1,2,3 even,odd) E:first-of-tyope...父元素指定类型的第一个子元素 E:last-of-type 父元素指定类型的最后一个子元素 E F:nth-of-type(n) 父元素指定类型的第nth的子元素 2.2.3 属性选择器 属性选择器...dispaly 行内元素与块元素的切换 属性 说明 display:block 将元素显示为块元素,前后有换行符 display:inline 将元素显示为内联(行内)元素,前后没有换行符 display...:inlineblock 将元素显示为行内块元素 display:none 将元素隐藏 3.2 字体样式 属性 说明 font-family 设置字体类型(字体) font-size 设置字体大小 font-style...,这意味着它们对其他元素的定位不会造成影响 ; 4.元素位置发生偏移后,它原来的位置不会被保留下来; 5.一般定位都是相对定位和绝对定位配合使用,父级元素先相对定位,子元素再绝对定位; 使用场景

    1.9K20

    CSS基本知识点——带你走进CSS的新世界

    的元素类型模式: 块元素 行内元素 我们先讲解一下块元素: 块元素包括:h标题系列,p,div,ul,ol,li 块元素特点包括: 自己独占一行 高宽,外距,背景色都可以设置 宽度默认为父类 是一个容器...最后我们介绍一下行内块元素: 行内块元素包括:img,input,td 行内块元素特点: 一行可有多个行内块元素 正常情况宽度为内容宽度 可以设置宽度 这些属性并非都是绑定的,我们可以通过方法进行转换...2 {} 同时选择多个选择器的标签 后代选择器: 父 子{} 可以选择父类的所有子类标签以及子类标签后的所有标签 子选择器: 父>子{} 只能选择父类的所有子类标签 相邻选择器: .class+兄弟标签类型...{} 只能选择.class的父类的下一个兄弟标签 通用选择器: .class~标签类型{} 可以选择.class的父类的下一个之后包括下一个的所有兄弟标签 下面给出代码示例: 下阴影 --> /* text-shadow: 阴影颜色 阴影水平移动大小 阴影垂直移动大小 阴影光晕半径 (移动大小是可以写负数的) */

    83120

    CSS基础知识点整理笔记

    嵌套块元素垂直边距合并,当父级元素没有设置border、padding的情况下,父子元素的margin边距会合并,其取值为较大值 css3的新特性 答案解析 常用css3新特性:动画属性animation...可以用来解决子元素浮动,父元素的高度没有了、两栏布局右栏不自适应、垂直方向上两元素边距有误等情况。...答案解析: 清除浮动是指的是父元素中的子元素设置float导致父元素的高度为0的情况 解决方案 父元素设置属性为:overflow:hidden (实质是触发BFC) 父元素中增加一个新的元素,添加属性...clear:both 父元素增肌伪类 ::after,设置{content:"",clear:both} css实现水平垂直居中 答案解析: 块级元素未知宽高情况下 利用弹性布局 .parent{...: 默认0,定义子元素相对于其他子元素在元素分配完还有剩余空间情况下的放大比例 flex-shrink:默认1,定义子元素相对于其他子元素在父元素空间不足时相对于其他子元素的缩放比例 flex-basis

    1.4K20

    CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动

    当然这更加适合超链接,在一个网页的超链接上,点击前后的样式可能不一样,当然这里只是展示一下语法,可以把下面的改成。...,比如父元素只有一个子元素,等等。...那么我们选出来了,该则么去把我们想要的效果展现出来呢,这就需要我们的CSS属性来套用实现。先来总结一下字体这一块的属性。...red; /* 水平阴影/垂直阴影/模糊距离/阴影颜色 */ ---- 首行缩进: text-indent: 2em; 行高:(当 行高 = 字体大小 可以实现垂直居中的效果) line-height.../垂直偏移/偏移距离/阴影颜色/是否内阴影(inset) */  border-radius(圆角实现)三种方式取其一即可。

    15620

    我碰到的那些面试题html+css

    其它情况下,该值将参与基线对齐 stretch 高度100%,宽度自动 align-self flex-start flex子元素在最上边 flex-end flex子元素在最下边 center flex...其它情况下,该值将参与基线对齐 stretch 高度100%,宽度自动 order 1(number) 改变顺序 flex 1(number) 该元素占子元素剩余位置的比例 ?...在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。...做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。...可以看到,在标准盒模型下,width和height是内容区域即content的width和height。

    1.2K20

    最全HTML与CSS基础总结,不进来看看吗?

    : 样式冲突, 遵循的原则就是就近原则, 哪个样式离结构进, 就执行哪个样式样式不冲突, 不会层叠 2.继承性 CSS中的继承:子标签会继承父标签的某些样式, 如文本颜色和字号。...body { font:12px/1.5 Microsoft YaHei; } 如果子元素没有设置行高,则会继承父元素的行高为1.5 此时子元素的行高是:当前元素文字大小 * 1.5 body...1.2 嵌套块元素垂直外边距的合并(塌陷) 对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距 父元素和子元素的上外边距和发生合并 合并后的外边距为: 取两者外边距较大者...解决方案: ①、可以为父元素定义上边框 ②、可以为外父元素定义上内边距 ③、可以为父元素添加 overflow:hidden 2.圆角边框 在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了...····· 3.盒子阴影和文字阴影 ①.盒子阴影 在CSS3中,新增了盒子阴影,这样我们的盒子就可以添加阴影。

    1K20

    CSS三大特性

    : 当子类未设置对应属性时,子类继承成父类的某些样式(例如:字体颜色,字体大小等) 恰当使用可以简化代码,降低css复杂性 子元素只能够继承父类的某些样式(text-,font-,line-这些元素开头的.../行内元素居中的方法: 使其对应的父类元素加上text-align:center即可 因为对于父类来说,行内块/行内元素属于父类的内部元素,所以将父类的内部元素居中即可实现行内块/行内元素居中 下面给出代码示例...: 当出现嵌套关系(父子关系)时,父元素和子元素同时有外边距时,此时父元素会塌陷较大的外边距值 解决方案: 为父元素定义一个上边框:border:1px solid transparent 为父元素定义一个内边距...不可以写outset,outset是默认的,如果写了会导致阴影失效 注意:阴影不占用盒子大小 下面我们给出代码示例: <!...,了解即可 结束语 好的,CSS进阶内容—盒子和阴影我们就讲到这里,你是否全部了解了呢?

    1.2K10

    CSS基础学习(2)

    就是子元素的宽度是父元素的 百分之几 1-2 盒模型–padding padding 作用 改变内边距 .box { padding: 20px; } 等同于 .box { padding-top...*左内边距*/ } 此外 上述代码还可以简述为 div{ padding: 20px 20px 20px 20px; /*代表 上、右、下、左*/ } 如果上下一样,左右一样,可以写成 div{...margin ,右边盒子的左margin 相加 垂直距离 为上下两个盒子的最大值 所以一般设置垂直距离 推荐 .box1{ margin-bottom: 50px; } 盒子左右居中 如下可以使子盒子在父盒居中...background-color: #fff2cc; padding: 20px; } 这样设置虽然和块元素相似,但有区别 如 这样设置可以覆盖块元素 行内元素可以设置左右 margin ,但不可以设置上下...margin inline-block 作用:可以使块元素显示在同一行内 但使两者之间会存在 间隙 处理方法 去除回车 <!

    65210
    领券