全部版块 我的主页
论坛 提问 悬赏 求职 新闻 读书 功能一区 学道会
722 5
2019-05-05
CSS样式与排版
控制边界与边框
从外到里:margin --->  border ---> Padding ---> HTML组件(边界、边框、边界间距、HTML组件)


margin-top:上边界  px/pt/%/auto   auto为默认值

margin-right
margin-bottom
margin-left

四个属性可以写到一起: div { margin: 5px 10px 15px 20px}   上、右、下、左

边框:边框宽度、样式、颜色以及圆角(CSS3新增)

border-style:  none(默认)、solid/double/groove/ridge/inset/outset
border-top-style / border-left-style / border-bottom-style / border-right-style   同border-style属性
border-width:  thin/thick/medium   也可以是宽度值+单位
     border-top/left/bottom/right-width  同 border-width
border-color    一样也有 border-top/left/bottom/right-color
border综合设置  (没有顺序:颜色、边框宽度、边框样式)


border-radius   圆角设置:长度(px) 或百分比(%)
     border-top-left-radius / border-top-right-radius  / border-bottom-left-radius /border-bottom-right-radius

border-image    花边框线:source  slice   width repeat;
eg:  border-image: url(border.png)  35 25 25 15;

边界间距:
padding是指边框(border)内侧和HTML组件边沿的距离,共有上下左右四边属性
padding-top  / padding-right / padding-bottom / padding-left


padding属性的顺序是: 上、右、下、左。循环往复


二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

全部回复
2019-5-5 15:01:29
[em17]
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

2019-5-5 15:22:56
点赞
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

2019-5-5 17:01:00
border-style:  none(默认)、solid/double/groove/ridge/inset/outset
border-top-style / border-left-style / border-bottom-style / border-right-style   同border-style属性
border-width:  thin/thick/medium   也可以是宽度值+单位
     border-top/left/bottom/right-width  同 border-width
border-color    一样也有 border-top/left/bottom/right-color
border综合设置  (没有顺序:颜色、边框宽度、边框样式)
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

2019-5-5 21:15:34
为您点赞!
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

2019-5-5 22:05:44
好分享,读罢学到很多,谢谢,为您点赞!
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

相关推荐
栏目导航
热门文章
推荐文章

说点什么

分享

扫码加好友,拉您进群
各岗位、行业、专业交流群