黑马程序员技术交流社区

标题: 技术贴 [打印本页]
作者: llm182    时间: 2020-3-1 23:30
标题: 技术贴
本帖最后由 llm182 于 2020-3-1 23:34 编辑

目前还是基础班的一名小白，也没有什么特别好用的技术分享给大家的，但是下面这些都是在写页面中常用到的知识点，还有一些我觉得有点难掌握的理论都分享给大家：
一、元素显示模式总结：元素显示模式还可以互相转换
     1.块级元素：一行只能放一个块级元素，可以设置宽度高度。例如：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
     2.行内元素：一行可以放多个行内元素，不可以设置宽度高度。例如：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
     3.行内块元素：一行可以放多个行内块元素，可以设置宽度高度。例如：<img />、<input />、<td>
二、CSS的背景属性
      背景样式合写：
       background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
      例如： background:   transparent    url(图片地址)   no-repeat   fixed   top
三、浮动：float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
       1.语法：选择器  { float: 属性值；}
       2.属性值：none     元素不浮动（默认）
                        left         元素向左浮动
                        right       元素向右浮动
四、定位：定位=定位模式+边偏移（子绝父相）
       1.语法：选择器  {
                             position:  属性值；
                    }
       2.属性值：    relative    相对定位（占有位置）、相对于自身位置移动
                              absolute   绝对定位（不占位置）、带有定位的父级移动
                              fixed          固定定位（不占位置）、伴随浏览器的可视区移动
                             
五、CSS属性书写顺序
      1.布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）      2.自身属性：width / height / margin / padding / border / background
      3.文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
      4.其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

  举例：
        .jdc {                    
display: block;                     
position: relative;                    
float: left;                  
width: 100px;                 
height: 100px;               
margin: 0 10px;                    
padding: 20px 0;                    
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;                     
color: #333;                    
background: rgba(0,0,0,.5);                    
border-radius: 10px;                 
    }
六、字体图标的引用
        1.icomoon字库 http://icomoon.io
        2.阿里iconfont字库  http://www.iconfont.cn/
最后给大家分享一个太极图小例子：
  <style>        
body {            background-color: #ccc;        }               
div {           
position: relative;            
width: 150px;            
height: 300px;            
background-color: #fff;           
border-left: 150px solid #000;            
margin: 100px auto;            
border-radius: 50%;        
}               
div::before {            
position: absolute;            
height: 30px;            
width: 30px;            
border: 60px solid #000;            
background-color: #fff;            
content: '';            
left: -75px;            
border-radius: 50%;
        }               
div::after {            
position: absolute;           
height: 30px;            
width: 30px;            
background-color: #000;           
border: 60px solid #fff;           
content: '';            
left: -75px;         
  bottom: 0px;           
border-radius: 50%;      
}   
</style>
</head>
<body>   
<div></div>
</body>
其实这么多代码都是靠一点一点的小知识积累而成的，所以一定要打好基础！
     













  






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2