首页 > 其他分享 >黑马pink css5

黑马pink css5

时间:2023-11-12 23:14:30浏览次数:37  
标签:pink 盒子 css5 元素 指定 边框 padding 外边 黑马

css有三大特性:层叠性,继承性,优先级。
层叠(覆盖)性:解决冲突
就近原则

恰当地使用继承可以简化代码,降低css的复杂性
行高的继承:font:12px/1.5 1.5表示当前文字大小的1.5倍
body行高1.5,这样写法的最大优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

继承的权重是0,只要该元素没有被选中,那么不论父元素的权重多高,对孩子的都是0
这也是为什么body的样式不会影响到a标签的默认样式

权重叠加-复合选择中

css盒子模型
学习目标:
准确说出盒子模型的四个组成成分
使用边框复合写法去添加边框
能够计算盒子实际大小
给盒子设计圆角边框
给盒子添加阴影
给文字添加阴影

组成:边框(border),外边距(margin),内边距(padding)和实际内容(content)
margin可以控制盒子间的距离

边框:粗细,样式,颜色
复合写法:粗细 样式 颜色;(没有顺序)
table,
td{
border:1px solid pink;
}
使表格外部和内部都有边框
border-collaps:collaps 将相邻的边框合并在一起,而不是重叠更粗(针对表格内部的线)
边框会影响盒子的实际大小 增加

padding的复合写法

指定padding后:
1.内容和边距有了距离,添加了内边距,
2.padding影响了盒子的实际大小 增加
只指定左右padding,而不指定上下的:padding:0 20px;
在实际开发中,padding常常会带来一些坏的影响,因为我们指定了盒子的大小,但是添加pdding后又会破坏这个大小
如果盒子本身没有指定padding大小,那么padding不会撑开盒子大小

margin的复合简写和padding是一致的
外边距典型应用:让块元素水平居中
要求:必须指定宽度。左右的外边距都设置成auto

如何让行内元素或行内块元素水平居中:让其父元素添加text-align:center即可。 (例如div里面嵌套了一个span)
存在的问题1:相邻块元素外边距垂直合并时取外边距的最大值
解决的办法1:尽量只对一个块指定外边距
存在的问题2:嵌套块元素垂直外边距的塌陷-父子元素都有外边距,父元素会按较大的那个外边距塌陷
解决的办法2:

清楚内外边距企划
为了兼容性,尽量只对行内元素设置左右的内外边距。

标签:pink,盒子,css5,元素,指定,边框,padding,外边,黑马
From: https://www.cnblogs.com/SKEZhi/p/17827692.html

相关文章

  • 黑马pink css3
    行内元素/内联元素:是最典型的行内元素特点:相邻行内元素在一行上,一行可以显示多个高,宽度设置是无效的默认宽度是他本身内容的宽度行内元素只能容纳文本或其他行内元素注意:内部不能嵌套‘’可以嵌套块级元素行内块元素:‘’特点:一行可以有多个,之间有空隙默认宽度是他本......
  • 黑马pink html2
    的name属性,帮助区分标签和归类,单选按钮和复选框的name值必须是相同的。的value属性定义了默认值。的checked规定了初始由谁选中checked="checked"可以选择文件标签可以绑定一个表单元素,当光标点击标签时,就可自动选择表单元素:label的for属性和input的id属性一致其他表单控件......
  • 黑马pink学前端 html1
    单标签“”利用vscode快速创建html页面:输入"!"AutoRenameTag:插件,同步修改标签更改vscode的文本格式化的设置,使得保存时自动对齐文本openinbrowser:插件,右键菜单里有打开网页liveserver(推荐):保存之后即可动态更新,无需刷新页面vscode-icons:显示文件的类型图标easy-......
  • 黑马git学习笔记
    安装及配置1.安装淘宝镜像,选择最新版本即可https://registry.npmmirror.com/binary.html?path=git-for-windows/根据系统选择对应的版本2.配置用户名密码gitconfig--globaluser.name[用户名]#配置用户名gitconfig--globaluser.email[邮箱]#配置邮箱查看配......
  • 黑马程序员2023新版JavaWeb开发教程学习笔记
    前言该笔记灵感来源于B站《黑马程序员2023新版JavaWeb开发教程,实现javaweb企业开发全流程(涵盖Spring+MyBatis+Springboot》源视频地址:黑马程序员2023新版JavaWeb开发教程个人声明:本文记录个人在进行该视频学习中的知识总结,帮助大家能更快地进行对该视频内容的学习;由于该视频对......
  • C++黑马程序员——P223-226. set容器 构造和赋值,大小和交换,插入和删除,查找和统计
    P223.set容器——构造和赋值P224.set容器——大小和交换P225.set容器——插入和删除P226.set容器——查找和统计P223.set容器构造和赋值特点:所有元素都会在插入时自动被排序本质:set/multiset属于关联式容器,底层结构是用二叉树实现。set和multiset的区别set不......
  • Pink Noise Is All You Need: Colored Noise Exploration in Deep Reinforcement Lear
    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布!PublishedasaconferencepaperatICLR2023 ABSTRACT 1INTRODUCTION 2BACKGROUND&RELATEDWORK 3METHOD 4ISPINKNOISEALLYOUNEED? 4.1DOESTHENOISETYPEMATTER? 4.2ISPINKNOISE......
  • RabbitMQ实例-天狼(与黑马基础混合使用)
    RabbitMQ讲义引言:中国被世界黑的最惨的一天2007年10月30日,北京奥运会门票面向境内公众第二阶段预售正式启动。上午一开始,公众提交申请空前踊跃。上午9时至10时,官方票务网站的浏览量达到了800万次,票务呼叫中心热线从9时至10时的呼入量超过了380万人次。由于瞬间访问数量过大,技术......
  • JavaWeb综合案例(黑马程序员2023年JavaWeb课程总结,所有功能均实现,包含数据库sql文件)
    JavaWeb综合案例(黑马程序员2023年JavaWeb课程总结,所有功能均实现,包含数据库sql文件)1.案例介绍:1.前端:Vue.js+element-ui+ajax(axios)+html2.后端:maven+mybatis+servlet 2.项目结构: 3.BrandMapper接口类 packagecom.itheima.mapper;   impor......
  • 面试项目-黑马头条-项目介绍
    1项目介绍B站视频黑马头条视频学习总结,侵权请联系删除1.1项目背景随着智能手机的普及,人们更加习惯于通过手机来看新闻。由于生活节奏的加快,很多人只能利用碎片时间来获取信息,因此,对于移动资讯客户端的需求也越来越高。黑马头条项目正是在这样背景下开发出来。黑马头条项目采......