文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS3边框相关的属性有哪些

2024-04-02 19:55

关注

今天小编给大家分享一下CSS3边框相关的属性有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

    盒子模型之border

    边框相关属性

    border-width控制边框的大小  用长度赋值

    border-style控制边框的样式  none没有边框  solid实线  dotted点线  dashed虚线  double双线条

    border-color控制边框的颜色  四种颜色表示法

    border-top控制上边框的样式

    border-right控制右边框的样式

    border-bottom控制下边框的样式

    border-left控制左边框的样式

    其实四条边也是复合属性:

    border-top可以分成这么几个属性:border-top-color  border-top-width  border-top-style  (剩下三条边以此类推)

    边框连写

    理论上:没有顺序,皆可省略

    案例:表格边框、四彩盒子、表单边框

    <!DOCTYPEhtml><htmllang="en"><head>

    <metacharset="UTF-8">

    <title>Document</title>

    <style>

    table{

    width:800px;

    height:300px;

    border:1pxsolid#000;

    border-collapse:collapse;

    }

    th,td{

    border:1pxsolid#000;

    }

    </style></head><body>

    <table>

    <caption><h4>今日小说排行榜</h4></caption>

    <thead>

    <tr>

    <th>排名</th>

    <th>关键词</th>

    <th>趋势</th>

    <th>今日搜索</th>

    <th>最近七日</th>

    <th>相关链接</th>

    </tr>

    </thead>

    <tbody>

    <tr>

    <td>1</td>

    <td>鬼吹灯</td>

    <td><imgsrc="img/up.jpg"width="13"height="11"/></td>

    <td>65589</td>

    <td>45</td>

    <td>贴吧图片百科</td>

    </tr>

    <tr>

    <td>2</td>

    <td>盗墓笔记</td>

    <td><imgsrc="img/down.jpg"width="13"height="11"/></td>

    <td>1</td>

    <td>456</td>

    <td>贴吧图片百科</td>

    </tr>

    </tbody></table></body></html>

    Document

    <!--四彩盒子-->

    </body></html>

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无文档</title><styletype="text/css">

    input{

    width:150px;

    height:18px;

    outline-style:none;

    }.username{

    border:1pxdashed#ccc;

    background-color:#E7EEFE;

    color:blue;

    }.username:focus{

    border:1pxdashedpink;

    background-color:#FFF7FB;

    color:pink;

    }.email{

    border:0none;

    border-bottom:1pxdashedred;

    }.search{

    border:1pxsolid#ccc;

    color:#ccc;

    background:url(search.png)no-repeatrightcenter;

    }</style></head><body>用户名:<inputtype="text"class="username"/><br/><br/>邮 箱:<inputtype="text"class="email"/><br/><br/><labelfor="txt">搜索一下</label>:<inputtype="text"id="txt"class="search"value="请输入..."/></body></html>

    盒子模型之padding

    内边距:控制内容和边框之间的距离

    padding属性和padding连写

    padding-top上内边距  padding-right右内边距  padding-bottom下内边距  padding-left左内边距

    四种连写

    1只写一个值  padding:10px;  代表四个方向都是第一个数字

    2写两个  padding:10px20px;  表示:上下内边距等于第一个数字,左右内边距等于第二个数字

    3写三个  padding:10px20px30px;  表示:上内边距=第一个数字,左右内边距等于第二个数字,下内边距等于第三个数字

    4写四个  padding:10px20px30px40px;  表示:上右下左分别对应各个数字

    padding和border对盒子的影响

    设置padding和border会对盒子的实际大小造成影响

    盒子的实际宽度=设置在css里的宽度+水平的paddding+水平的border

    盒子的实际高度=设置的高度+垂直的padding+垂直的border

    但是是要注意:

    如果是存在父子关系的时候

    如果子盒子没有设置宽度,并且子盒子的padding+border没有超过父盒子的宽度,子盒子的宽度是不会改变的

    如果子盒子的padding+border超过父盒子的宽度,会被padding和border撑开宽度

    案例:

    padding的作用、padding计算题

    <!DOCTYPEhtml><htmllang="en"><head>

    <metacharset="UTF-8">

    <title>Document</title>

    <style>

    p{

    border:1pxsolid#000;

    width:500px;

    height:500px;

    padding:10px;

    }

    </style></head><body>

    <p>

    我是盒子中的内容</p></body></html>

    <!DOCTYPEhtml><htmllang="en"><head>

    <metacharset="UTF-8">

    <title>Document</title>

    <style>

   

    .father{

    width:300px;

    height:150px;

    padding:75px100px;

    background-color:red;

    }

    .son{

    width:300px;

    height:150px;

    background-color:green;

    }

    </style></head><body>

    <pclass="father">

    <pclass="son"></p>

    </p></body></html>

    盒子模型之margin

    外边距属性和外边距连写

    margin-top控制盒子的上外边距

    margin-right控制盒子的右外边距

    margin-bottom控制盒子的下外边距

    margin-left控制盒子的左外边距

    margin的连写和padding是一样的

    垂直塌陷(合并)现象

    当两个盒子垂直分布,同时给两个盒子设置了相对的margin值,两个盒子之间的实际距离,取决于连个margin值中的最大

    包含塌陷(合并)现象

    当给子盒子设置margin-top的时候,有可能会把父盒子一起带跑

    如何解决:

    1、给父盒子设置边框

    2、给父盒子设置overflow:hidden

    案例:列表显示

    <!DOCTYPEhtml><htmllang="en">

    <head>

    <metacharset="utf-8">

    <style>

    ul{

    list-style:none;

    }

    ulli{

    background:url(li.gif)no-repeatleft4px;

    padding-left:25px;

    }

    lia{

    text-decoration:none;

    }

    a:hover{

    color:#9E7878;

    text-decoration:underline;

    }

    </style>

    </head>

    <body>

    <ul>

    <li>大明星:姜潮魔性拜年道晚安</li>

    <li>软萌正太徐浩演绎《小幸运》</li>

    <li>漫威绝逼好看的电影镜头合集</li>

    <li>从没见过这么搞笑的祖孙组合</li>

    <li>史上最容易挨揍的自助餐吃法</li>

    </ul>

    </body></html>

    给行内元素设置margin和padding的问题

    给行内元素设置margin-top和margin-bottom没有效果

    给行内元素设置垂直padding的时候,能够增加高度,位置不会依赖于padding撑开的位置

    以后给行内元素控制位置,不要用垂直的padding和margin

    我们通常使用行高控制行内元素的垂直位置

    margin:0auto;的秘密

    margin-left和maring-right同时是auto的时候,会让子元素(块级)居中显示

    能将设置了宽度的块级元素相对于其父元素水平居中

    通常会使用它来将页面的版心居中

    将行内元素和行内块级元素居中

    给容器设置text-align:center

CSS3边框相关的属性有哪些

以上就是“CSS3边框相关的属性有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯