前端分享，关于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

posted @ 2023-08-04 11:31  博客-涛  阅读(7)  评论(0)  编辑  收藏  举报