关键词：
如何设置标签样式
给标签设置长宽
只有块儿级标签才可以设置长宽
行内标签设置了没有任何作用(仅仅只取决于内部文本值)
字体颜色 color后面可以跟多种颜色数据
颜色英文 red
#06a0de 直接用pycharm提供的取色器即可
rgb(1,1,1) 可以利用截图软件获取三基色数字
rgba(0,128,128,0.9) 最后一个数字 只能用来调节颜色的透明度
语义
a {
text-decoration: none;
}
取消a标签默认的下划线
背景图片 默认是铺满整个区域
通常一个页面上的一个个的小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图标样式
边框
border 后面写三个参数 位置没有关系
颜色
字体
样式
可以单独设置 样式 颜色 粗细
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
可以单独设置某一边的样式
/*border-top: 3px solid red;*/
/*border-left: 1px dotted green;*/
/*border-right: 5px dashed blue;*/
/*!*border-bottom: 10px solid pink;*!*/
也可以简写统一设置
border: solid 10px red;
display
inline 将块儿级标签变成行内标签
block 能够将行内标签 也能设置长宽和独占一行
inline-block; /*即可以设置长宽 也可以在一行展示*/
display:none 隐藏标签 并且标签原来占的位置也没有了
visibility:hidden 隐藏标签 但是标签原来的位置还在
盒子模型
谷歌浏览器body默认有8px外边距
body {
margin:0px;
}
以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离) 外边距(margin)
2.快递盒盒子的厚度(边框border) 边框(border)
3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离) 内边距(内填充) padding
4.物品的大小(文本大小) 内容content
/*margin: 15px; !*只写一个参数 上下左右全是*!*/
/*margin: 10px 20px; !*第一个控制的上下 第二个是左右*!*/
/*margin: 10px 20px 30px; !*第一个控制的上 第二个是左右 第三个是下*!*/
margin: 10px 20px 30px 40px; /*上 右 下 左*/
padding简写规律跟margin一样
#d1 {
margin: 0 auto;
}
只能左右居中 不能上下居中
浮动(*****)
float
在 CSS 中，任何元素都可以浮动。
浮动的元素 是脱离正常文档流的(原来的位置会让出来)
浏览器会优先展示文本内容(******)
浮动带来的影响
会造成父标签塌陷(口袋瘪了)
如何解决父标签塌陷问题？？？
clear 清除浮动带来的影响
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
哪个父标签塌陷了 就给谁加clearfix这个类属性值
overflow溢出属性
定位
所有的标签默认都是静态的 无法改变位置
position: static;
必须将静态的状态修改成定位之后
相对定位(了解) relative
相对于标签原来的位置 移动
绝对定位(小米的购物车) absolute
相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位
固定定位(回到顶部) fixed
相对于浏览器窗口 固定在某个位置不动
位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
固定定位
opacity
既可以调颜色 也可以调字体
css垂直对齐中心全部#css(代码片段)
CSS“全部”转换不起作用
】CSS“全部”转换不起作用【英文标题】：CSS"all"Transitionisnotworking【发布时间】：2017-08-0104:59:56【问题描述】：我需要帮助我的css转换，因为它似乎根本不起作用。这是我的CSS代码。你认为我错过了什么吗？/*headernavigatio... 查看详情
小写全部然后大写 - 纯CSS [重复]
】小写全部然后大写-纯CSS[重复]【英文标题】：Lowercaseallthencapitalize-pureCSS[duplicate]【发布时间】：2014-03-1615:33:51【问题描述】：我在这里看到了这个话题：Firstlowercasethetextthencapitalizeit.IsitpossiblewithCSS?但这不是纯CSS。我有一个包... 查看详情
深入理解css系列：理解css的盒子模型
接触前端也有好几个年头了，但是，讲实话，对于CSS的理解真的是不敢恭维，相信很多同行也有类似的感受吧！这是为什么呢？因为我们都认为CSS太简单了，没有必要深入学习，果真如此？其实，只不过是自己图样图森破罢了。... 查看详情
css全部的列表样式类型
<html><head><styletype="text/css">ul.none{list-style-type:none}ul.disc{list-style-type:disc}ul.circle{list-style-type:circle}ul.square{list-style-type:square}ul.decimal{lis 查看详情
css之文本缩进|文本对齐|上划线|下划线|删除线|首字母大写|全部变大写|全部变小写
1.文本缩进：举例： 如果是整个段落缩进：要实现下面的效果： -40px 2.文本对齐：举例：3.文本装饰：举例：删除线：4.文本变形：举例：全部变大写：全部变小写： 查看详情
CSS3 过渡：“过渡：全部”是不是比“过渡：x”慢？
】CSS3过渡：“过渡：全部”是不是比“过渡：x”慢？【英文标题】：CSS3Transitions:Is"transition:all"slowerthan"transition:x"?CSS3过渡：“过渡：全部”是否比“过渡：x”慢？【发布时间】：2012-02-1508:59:17【问题描述】：我... 查看详情
多个 css3 过渡类型不使用“全部”
】多个css3过渡类型不使用“全部”【英文标题】：Multiplecss3transitiontypesnotusing\'all\'【发布时间】：2011-11-1512:28:04【问题描述】：我正在尝试使用CSS3过渡来过渡比例和不透明度-如果不使用all，我无法弄清楚如何过渡多个事物transi... 查看详情
css初步理解
...。有关CSS的基础知识详见下链接。CSS基础知识下面是对CSS理解的导图 通过上图我们也发现。CSS也非常难。也easy。easy是说。学起来非常快就能够上手，这中语言简 查看详情
css选择器理解汇总和记录
注：CSS选择器一直纠结了好久，就是不怎么理解，现在进行整理分类，加强理解。内容如下：（格式来自WorkFlowy，故不适合文本展示，请容忍一下）CSS选择器理解、汇总和记录1、选择器中符号含义汇总（这部分包含了对选择器... 查看详情
无法拖动未设置 css 属性的元素：全部
】无法拖动未设置css属性的元素：全部【英文标题】：can\'tdragelementthathascsspropertyunset:all【发布时间】：2017-12-0310:16:49【问题描述】：似乎我无法拖动具有unset:allcss属性的元素。.my-componentall:initial;*all:unset;我在chrome扩展中使用这... 查看详情
深入理解android包体积优化，给apk瘦身全部技巧(代码片段)
前言随着iphone13p最大内存放大到了1T，大内存手机的时代悄然降临，在android里面，三星也有，罗老师几年前说：如果我告诉你们我们在做1T的手机，你们可能以为我疯了。看看现在，估计未来会有更多... 查看详情
redux简明学习
...学redux的时候有点浮躁。还有就是redux内容实在是不少，全部都看都理解，好像没什么必要。不看吧，用的时候总是有点力不从心。于是，决定把这些资料按自己的理解写成博客，方便自 查看详情
CSS Flexbox 子项未占用全部可用宽度
】CSSFlexbox子项未占用全部可用宽度【英文标题】：CSSFlexboxchildrenitemsnottakingupfullavailablewidth【发布时间】：2020-11-1919:27:22【问题描述】：我正在尝试将卡片组件的标题放在最左侧，将其他一些数据放在最右侧，如下图所示：我为... 查看详情
javademo学习理解反射机制（基础学习）
...象·获取一个对象的父类与实现的接口·获取某个类中的全部构造函数-详见下例·通过反射机制实例化一个类的对象·获取某个类的全部属性·获取某个类的全部方法·通过反射机制调用某个类的方法·通过反射机制操作某个类的属... 查看详情
css伪类的理解
...对css伪类没有过多的了解，在网上看到一段css代码，不能理解a:hoverspan.title{color:red;.........}现通过查询css手册，其实css伪类只是表示了一种状态，a:hover只是表示了鼠标悬浮状态下的a标签，和一般的a标签用法没有区别，a:hoverspan.t... 查看详情
css之深入理解overflow
主要是对大神讲解的视频的总结，我自己是写不出来什么东东的 查看详情
css选择器总结
选择器.class类对应的元素。#id对应的id元素。*全部元素div{}对应的标签div,p{}全部的div和pdivp{}div下全部的p标签div>p{}div下的第一代子标签。div+p{}仅仅作用于div后一个p,假设后一个不是p则没有作用效果。p~ul{}选取同一个父元素的p... 查看详情