首页 > 其他分享 >个人笔记,关于css样式

个人笔记,关于css样式

时间:2023-08-04 11:45:43浏览次数:43  
标签:TRBL 父级 样式 relative 笔记 padding absolute css 属性

/*引入样式
<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">
*/
html {
  /* px 表示 “像素(pixels)”: 基础字号为 10 像素 */
  font-size: 20px; 
  /* Google fonts 输出的 CSS */
  font-family: 'Open Sans', sans-serif; 
}
p, li {
  font-size: 16px;/*文本大小*/
  line-height: 2;/*上下间距*/
  letter-spacing: 1px;/*文本间距*/
}

/* 应用于四个边 */
padding: 1em;

/* 垂直方向| 水平方向*/
padding: 5% 10%;

/* 顶部| 水平方向| 底部*/
padding: 1em 2em 2em; 

/* 顶部| 右边| 底部| 左边*/
padding: 2px 1em 0 1em;

padding: inherit;ing
/* 应用于四个边 */
padding: 1em;

/* 垂直方向| 水平方向*/
padding: 5% 10%;

/* 顶部| 水平方向| 底部*/
padding: 1em 2em 2em; 

/* 顶部| 右边| 底部| 左边*/
padding: 2px 1em 0 1em;

padding: inherit;

margin: style                  /*单值语法  所有边缘 */  
举例: margin: 1em; 

margin: vertical horizontal    /*二值语法  纵向 横向 */  
举例: margin: 5% auto; 

margin: top horizontal bottom  /*三值语法 上 横向 下*/  
举例: margin: 1em auto 2em; 

margin: top right bottom left  /*四值语法 上 右 下 左*/ 
举例: margin: 2px 1em 0 auto; 

margin: auto; /*auto是浏览器自动计算外边距。*/

margin: inherit;  /*inherit则规定应该从父元素来继承外边距。*/


body {
  width: 600px;
  margin: 10px auto;//外边距
  background-color: #FF9500;
  padding: 20px 20px 0 20px;//内边距
  border: 1px solid darkblue;//边框
}
vertical-align: middle;//文字居中对齐
cursor: pointer;//小手 zoom-out 放小 zoom-in 放大
line-height: 46px;//文字行高
text-align:justify; text-justify:inter-ideograph;// 文本两端对齐
// 自定义Table 边框
.Table {border-right:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD}
.Table  td{border-left:1px solid #DDDDDD;border-top:1px solid #DDDDDD}
.upTable tr:nth-child(even){
   background: #F5F5F5;
}
.upTable tr:nth-child(odd){
    background: #FFFFFF;
}


position:static | relative | absolute | fixed

默认值:static

static: 无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 
relative: 对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。 
absolute: 对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。 
fixed: 对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。

position属性的relative以及absolute的区别是什么?

 任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute(绝对)这两种属性。

  再分别介绍两种属性之前,我们一定要记住一个重要结论:如果用position来进行布局,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素padding的属性影响,当然也可以用relative,不过到时候计算的时候不要忘记padding的值。

  【absolute:绝对定位】
  默认参照浏览器左上角,配合TOP、RIGHT、BOTTOM、LEFT(以下简称TRBL)进行定位,具有以下属性:
  (1)无TRBL的情况下,参照父级左上角;无父级,参照浏览器左上角;无父级元素,但存在文本,参照最后最后一个文字的右上角为原点但是不断开文字,覆盖与上方。
  (2)如果设定TRBL,并且父级没有position属性(不论是absolute还是relative),都是默认以浏览器左上角开始定位,位置由TRBL决定。
  (3)如果设定TRBL,并且父级有position属性(不论是absolute还是relative),默认以父级左上角为原点开始定位,位置由TRBL决定。
 以上三点我们就可以总结出:若想使用absolute进行定位,那我们就要明确两点:
 第一:设定TRBL

 第二:父级设定position属性

  【relative:相对定位】
  默认参照父级原始点为原始点;如果无父级,以文本的上一个元素的底部为原始点,配合TRBL进行定位;当父级内有padding属性时,参照父级内容区的原始点进行定位。
  (1)不存在TRBL,参照父级左上角;没有腹肌,参照浏览器左上角;没有腹肌元素,但是存在文本,则以文本的底部为原始点进行定位并将文字断开。
  (2)设定TRBL,并且父级没有设定position属性,以父级左上角为原点进行定位
  (3)设定TRBL,并且父级设定position属性,以父级左上角为原点进行定位,但是如果父级有padding属性,那么以内容区域的左上角为原点进行定位。

   综上所述,relative均以父级左上角进行定位,但是受padding的影响。

   这样,我们就可以得知为什么要选用relative定位父级元素,absolute定位内部元素。因为我们布局时用relative后,就不只是用float布局页面了,还可以用TRBL进行布局。但是如果用absolute来布局页面,搜有的DIV都相对于浏览器的左上角定位,这样适配性会大大下降,用户体验度很低。所以只能用与将某个元素定位于属性为absolute的元素的内部的某个位置。
html
<img id="prewimg" src="data:image/png;base64,base64编码" class="">

CSS justify-content 属性:上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>

</body>
</html>

参考地址:https://www.runoob.com/cssref/css3-pr-justify-content.html

标签:TRBL,父级,样式,relative,笔记,padding,absolute,css,属性
From: https://www.cnblogs.com/htmsmile/p/17605449.html

相关文章

  • YOLO系列代码调试笔记
    环境:Windows10、Python3.8.5、torch1.13.0+cu116、torchvision0.14.0+cu116工程:https://github.com/abeardear/pytorch-YOLO-v1bug1:#resnet=models.resnet50(pretrained=True)resnet=models.resnet50(weights=ResNet50_Weights.DEFAULT)因为版本原因,加载预......
  • Java 诊断工具 Arthas 教程学习笔记
    Java诊断工具Arthas教程学习笔记 Java诊断利器Arthas,是阿里的一款开源工具。Github-alibaba/arthas 上可以看到它的介绍。了解它,主要是最近对分析Java错误堆栈比较感兴趣,机缘巧合看到了它。本文记录的内容,就是基于它官网的文档摘抄的,涉及的截图可能由于篇幅有限,不是......
  • [岗位能力--判断推理1--贾鹏]军队文职2023-01-03之前笔记
    day1 ......
  • 系统架构设计师笔记第43期:云原生架构案例分析
    云原生架构是一种软件架构和开发方法论,旨在利用云计算、容器化和微服务等技术,构建高度可伸缩、弹性和可靠的应用程序。它的设计理念是将应用程序与底层的基础设施解耦,以实现更高的灵活性、可维护性和可扩展性。云原生架构的核心特点包括:微服务架构:将应用程序拆分为一组小型、自治的......
  • Java学习笔记(二)
    第二章Java的基础语法2.1Java的注释1、注释是干什么的?给程序员(人)看的,辅助程序员理解代码的解释性的文字。2、注释的形式有3种(1)、单行注释//注释内容(2)、多行注释/* 注释内容1 注释内容2 注释内容3*/(3)、文档注释/** 文档注释内容*/文档注释可以被javadoc.exe工具读取,生......
  • python教程 入门学习笔记 第6天 数据类型转换 字符串转换成数值 数值之间互转 其它类
    4、数据类型转换1)字符串转换成数值:int()-----------将值转换成整数float()-----------将值转换成小数str()-----------将值转换成字符串bool()-----------将值转换成布尔值例如:int()将值转换成整数s1="188"#字符串ns1=int(s1)#转换成整型数值print(ns1+8)#打印数......
  • 二分图(菜鸟笔记)
    1.二分图的有关性质  首先二分图必定不具有奇数环。而不具有奇数环的图必定可以被染成相邻两个点都不是同个颜色的图(只用黑白两色)。  首先证明不具有奇数环的图是图在染色不存在矛盾的充分必要条件。  证明充分性,用反证法。图中无奇数环,但是染色存在矛盾,则有白黑白......
  • 算法工程师学习运筹学 笔记一 P,NP,NPC问题
    算法的时间复杂度我之前理解的时间复杂度,是指的解决一个问题所需要的时间。但其实并不准确,时间复杂度应该是 当问题规模扩大后,程序需要的时间长度增长得有多快。时间复杂度有两种类型:一种是O(1),O(log(n)),O(n^a)等,我们把它叫做多项式级的复杂度,因为它的规模n出现在底数的位置;......
  • k8s 学习笔记之 Pod——Pod 的调度
    Pod的调度在默认情况下,一个Pod在哪个Node节点上运行,是由Scheduler组件采用相应的算法计算出来的,这个过程是不受人工控制的。但是在实际使用中,这并不满足的需求,因为很多情况下,我们想控制某些Pod到达某些节点上,那么应该怎么做呢?这就要求了解kubernetes对Pod的调度规则......
  • CSS样式的优先级高的如何覆盖
    使用样式规则的优先级来解决问题 !important 可以覆盖无素比较高的优先级CSS样式的优先级:1.行内样式:通过元素的style属性设置的样式,具有最高的优先级。2.ID选择器:通过元素的id选择器设置的样式会覆盖元素的类选择器和标签选择器。3.类选择器/属性选择器/伪类选择器:这......