您现在的位置是：网站首页> 编程资料编程资料

浅谈HTML（css基础样式）html/css基础篇——html代码编写过程中的几个警惕点(必看)html、css基础注意点(前端必看篇)HTML CSS样式基础(必看篇)HTML基础总结推荐(段落)HTML基础知识——css样式表,样式属性,格式与布局详解HTML基础知识——设置超链接的样式简单实例HTML基础必看——全面了解css样式表HTML基础必看---表单,图片热点,网页划区和拼接详解HTML基础重点_一般标签、常用标签和表格前端开发每天必学之HTML入门介绍

2021-09-05 587人已围观

简介 下面小编就为大家带来一篇浅谈HTML（css基础样式）。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

solid 边框加粗
border：5px 设置边像素
display:inline-block 横着显示块状的
line-height:40px 字体上下居中
text-align：center 字体左右居中
margin-right：20px 调整外界边框

CSS Code复制内容到剪贴板
  1. "margin: 0px">  
  2.   
  3.       
  4.   
  5.     "width: 80px;height: 40px;border: 5px salmon solid; 
  6.  
  7.     display: inline-block; line-height: 40px; text-align: center; 
  8.  
  9.     margin-right:20px">呵呵
  
  •   
  •    
  •   
  •     "width: 80px; height: 40px;border: 5px slateblue solid; 
  •  
  •     display: inline-block;line-height: 40px; text-align: center; 
  •  
  •     margin-right: 60px">导航
    •   

    www.jb51.net

     

    2. margin;边距，顺序是上 ，右， 下， 左 可以负数

    CSS Code复制内容到剪贴板
    1. "width: 200px;height: 200px;border: 5px salmon solid;">  
    2.   
    3.     "width: 100px;height: 100px;border: 5px seagreen solid; 
    4.  
    5.     margin: 20px 30px 20px 50px">
      
  •   
  •       
  •   
    •   

    www.jb51.net

    2.1 padding:内边距 顺序一样，上，左，下，右，从内边缘开始长胖

    CSS Code复制内容到剪贴板
    1. "width: 200px;height: 200px;border: 5px salmon solid;">  
    2.   
    3.     "width: 100px;height: 100px;border: 5px seagreen solid; 
    4.  
    5.     padding: 20px 30px 20px 50px">
      
  •   
  •       
  •   
    •   

    www.jb51.net

    3.margin-top 设置元素的上外边距，如果有多个边距则选择最大值

    CSS Code复制内容到剪贴板
    1. "width: 200px;height: 200px;background-color: #FF0000; 
    2.  
    3. margin-top: 100px">  
    4.   
    5.     "width: 100px;height: 100px;background-color: aqua; 
    6.  
    7.     margin-top: 30px">
      
  •   
  •       
  •   
  •    
  •   
    •   

    www.jb51.net

     

    浮动调整

    1.无浮动效果

    CSS Code复制内容到剪贴板
    1. "width: 200px; height: 200px;border: 10px darkmagenta solid">无与伦比
      
  •   
  • "width: 300px;height: 300px;background-color: chartreuse">的美丽
    •   
  •   
  •   
  •   
  •   

    • www.jb51.net

     

    2.有浮动的效果

    CSS Code复制内容到剪贴板
    1. "width: 200px; height: 200px;border: 10px salmon solid;float:left">无与伦比
      
  •   
  • "width: 300px; height: 300px;background-color: seashell">美妙绝伦
    •   
  •   
  •   
  •   

  •   

    • www.jb51.net

    3.清除浮动

    CSS Code复制内容到剪贴板
    1. "width: 200px;height: 200px;border: 10px darkgoldenrod solid;float: left">无与伦比
      
  •   
  • "clear: left;width: 300px;height: 300px;background-color: chartreuse;">美妙绝伦
    •   
  •