css-03

冷不防 2022-07-15 01:13 133阅读 0赞

1、文本格式化  
   1）控制字体  
      1⃣️指定字体  
         font-family:"microsoft yahei",arial,"宋体";  
      2⃣️字体大小  
         font-size: px , pt 作为单位  30pt  16pt  
常用字体大小：12px - 14px  
      3⃣️字体加粗  
         相当于 <b></b>  
font-weight : normal / bold ;  
              400 - 900 : 400,500,600,700,800,900  
建议：通过 该属性取代 b 标签  
      4⃣️字体样式  
         斜体  
font-style:normal / italic;  
相当于<i></i>  
      5⃣️小型大写字母  
         font-variant : normal / small-caps;  
      6⃣️字体属性 font  
         将所有的属性设置在一个声明当中  
font:font-style font-varaint font-weight font-size font-family;  
eg:font:italic small-caps bold 12px "microsoft yahei",arial;  
常用写法:  
font :font-size  font-family;  
font:bold 12px "microsoft yahei";  
其他写法:  
       font : font-size/line-height font-family;  
font:12px/24px "microsoft yahei";  
    line-height : 行高  
    2）文本属性  
       1⃣️颜色  
          color : 颜色值 ;  
         rgba(255,0,0,0.5);  
       2⃣️文本排列  
          text-align:left/right/center; 元素中的内容水平对齐方式，大部分主流浏览器，只对行内元素起作用，对块不起作用  
 vertical-align:top / bottom / middle / baseline; 文本内容垂直对齐方式（针对td）  
     baseline : 基线对齐  
       3⃣️文字修饰(线条)  
          text-decoration:none / underline   
    none : 去除文本上的线条  
    underline : 下划线  
    overline : 上划线  
    linethrough : 删除线  <s></s>  
       4⃣️行高  
          每行文本所占据的高度。如果行高的值高于文本的高度，那么这段文本会在行高范围内垂直居中显示。  
 使用方式：  
     1、将行高与容器高度设置为一致，从而使容器内的文本垂直居中显示。(只针对一行数据)  
     2、如果想给文本增加上下的边距，也可以使用line-height  
       5⃣️首行文本缩进  
          让元素内的首行文本，空出指定的像素值  
 text-indent:value;  
       6⃣️文本阴影  
          text-shadow:h-shadow v-shadow blur color;  
    3）文本溢出处理  
       1、处理空白  
          white-space:normal / nowrap;  
  
  
 出现场合：配合着overflow:hidden;来对超出范围的内容进行隐藏。从而保证元素的高度  
       2、文本溢出  
          overflow:hidden; 元素对溢出后的处理  
 属性:text-overflow:  
 取值:  
      clip : 裁剪、切割  
      ellipsis : 隐藏溢出内容并且显示 ...  
 注意：text-overflow 要 配合着 overflow:hidden;一起使用  
       3、长单词换行  
          属性:word-wrap  
 值:normal / break-word  
       4、文本换行  
 属性：word-break  
 取值：normal / break-all / keep-all  
2、表格属性  
   1）常用属性(标准属性)  
      内边距:padding  
      尺寸属性:width , height  
      边框属性:border  
      背景属性:background  
      文本格式化属性:font ...  color ....   
      对齐:text-align,vertical-align  
   2）表格特有样式属性(只针对表格)  
      1⃣️边框合并  
         属性:border-collapse  
取值:  
     separate : 默认值，分离边框  
     collapse : 边框合并  
      2⃣️边框间距   
         相当于 cellspacing  
属性：border-spacing  
注意：border-collapse值必须为 separate  
取值：  
    指定一个值：设置水平和垂直统一的间距  
    指定两个值：第一个值表示水平间距，第二个值表示垂直间距。两个值 空格 隔开  
      3）标题位置  
         <caption>出现的位置  
属性:caption-side  
取值：top 默认值，出现在表格之上  
      bottom 标题出现在表格之下  
      4）显示规则  
         如何控制表格中 单元格 的算法  
语法：table-layout  
取值：  
      auto : 列宽度有内容决定，默认值，称为自动表格布局  
      fixed : 列宽度由列的 width 来决定，固定表格布局  
         自动表格布局:  
    处理复杂表格时，速度会稍慢  
    不适合确定列大小时用  
固定表格布局:  
    列宽度由列 width 来决定，不会根据内容而发生改变  
    适合用于确定列宽度时使用  
    速度略快  
3、浮动  
   1）什么定位  
      元素该出现的位置  
      分为以下几类：  
        普通流定位(文档流定位)  
浮动定位  
相对定位  
绝对定位  
固定定位  
   2）普通流定位  
      页面默认的定位方式  
      块级元素：从上到下显示  
      行内元素：从左到右显示  
   3）浮动定位  
      1⃣️什么是浮动定位  
         元素会脱离默认文档流,在页面上不会占据空间  
浮动定位的元素会放置在包含框的左边或者右边  
浮动的元素依然在包含框内  
当浮动元素碰到其他浮动元素时，就会停止浮动  
      2⃣️浮动定位解决的问题  
         实现特殊的定位方式，比如：让多个块级元素在同一行内显示  
      3⃣️属性  
         float  
取值：  
     left : 左浮动  
     right : 右浮动  
     none : 无浮动  
清除浮动所带来的影响:  
属性：  
clear:left,right,both;  
      4⃣️元素一旦浮动起来的话，那么都将成为块级元素