背景设置与盒子模型问题集锦

宽(width)高(height)度设置:

1、 行内元素与块元素的区别
宽高度设置对于有些行内元素无效;图片、表格有效;网页中使用的图片比较多,建议控制图片宽高度,以便控制显示内容大小(图片会缩放,最好按等比例来设置,否则会变形)
2、 指定像素与百分比
一般情况下行内样式需要设置宽度的单位,比如说像素px(pixel);设置宽度为百分比可以固定宽度,比如块元素DIV,宽度不设置为100%,高度为0px(或内容的高度),以单位值固定的宽高度的标签内容超出不会在容器内显示。

背景(background):

背景色Background-color
背景图片 background-image:url(图片路径); 默认会水平、垂直方向重复

Url:统一资源定位符,就是资源的地址。
注意外链样式尽量不要使用图片背景,非要使用可以使用服务器根目录定位。
背景重复 background-repeat: no-repeat repeat-x repeat-y
背景吸附 background-attachment:scroll (默认,随对象滚动)  fixed(固定)

<body style="background-image:url('1.jpg'); background-repeat:no-repeat;

background-attachment:fixed; height:1500px;">

asfasdfasdfsadfdsfa

</body>

背景定位 background-position:top center bottom left right  x y(用于一张图片背景定位,容器不动背景图像移动!!!),例如一张图片背景定位
<div style="width:100px; height:100px; background-image:url(1.jpg); background-repeat:no-repeat; border:1px solid black; background-position:-201px  -236px;"></div>

background-size:cover 可以让背景图片拉伸,但是要求IE8以上版本!!!

盒子模型

背景设置与盒子模型问题集锦

布局一般顺序:
1、关注内容,放内容;
2、控制内容与边框距离,Padding,内边距;
Padding(内边距,内容距离标签边框的距离,该元素的宽度=内容宽度+padding):10px; 代表 上、右、下、左 (顺时针)内容与边框的距离都是10PX;还可以控制内边距的上下左右距离:50px 100px;可以这样书写完全控制 padding:10px 20px 30px 40px;

  • border:外边框。可以单独写border-bottom:1px solid black; 也可以简写border:1px solid black;
    4、Margin:外边距。边框距离容器的距离。Margin:10px; 类似于padding上、右、下、左,外间距,但是只有顶部、左侧有效。Margin:10px 20px 30px 40px;

margin-left:100px; margin-top:100px;

针对于表格:

背景设置与盒子模型问题集锦

cellpadding为单元格内容距离单元格边框的边距;cellspacing单元格与单元格之间的边距。

边框圆角: border-radius:50px;

<img src="anniu.jpg" width="200px" height="100px" style="cursor:pointer; border-radius:10px;" onclick="alert('haha');" />

对齐(align)

1、 容器对齐:
该标签相对于容器对齐,该标签加上align属性(块元素无效);

2、 内容对齐(左、右、居中、两端)
该标签的内容样式 style=”text-align:center;”

 

作业:

利用以上知识,使用table布局以下效果

背景设置与盒子模型问题集锦

提示:

背景色: #6c6c6c

文本框提示: placeholder=”提示信息”

边框阴影: box-shadow:inset 0 0 10px gray;

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/3000.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2017年10月25日 00:00
下一篇 2017年10月25日 08:16

相关推荐

  • web前端设计表格布局和div+CSS布局。

    发展过程 上个世纪Web开发人员流行使用表格进行文档整体布局。因为当时大部分浏览器不支持CSS,而且大部分人不会CSS,且没有文档拆分设计,致使文档臃肿,到了上个世纪末大部分没有相关背景的人进入,对于那些没有…

    2022年7月4日 建站资讯
    0328
  • css涉及的英语单词!

    Css(cascading  style sheet)  (级联样式表)a:active 单击鼠标左键italic(倾斜)word-spacing  单词和单词之间的距离underline下划线   Font-size文字的大小Background-color:背景颜色Background-attachment :背…

    2018年4月28日
    0366
  • 小编教你html 中如何使块居中显示。

    在HTML中,有多种方法可以使块级元素居中显示,这里将详细介绍几种常用的技术手段: (图片来源网络,侵删) 1. 使用CSS的margin属性 通过设置左右外边距(margin)为自动(auto),可以使得块级元素在水平方向上居…

    2024年6月26日
    00
  • css如何居中显示。

    css设置图片居中怎么设置 使用flex布局:将图片的父元素设置为display: flex,并使用justify-content和align-items属性来水平和垂直居中图片。 如何通过css设置一张背景图片自动水平垂直居中呢?可以通过css提供的…

    2024年6月16日
    00
  • 关于css内联样式的语法是什么。

    CSS内联样式的语法是在HTML元素中使用style属性,将CSS样式直接写在元素内部。 这是一个内联样式的例子 。 CSS内联样式是HTML中的一种样式定义方式,它允许开发者直接在HTML元素中使用“style”属性来定义元素的样式…

    2024年7月11日
    00
  • 我来说说html如何让多余的部分隐藏。

    在HTML中,我们可以通过多种方式来隐藏多余的部分,以下是一些常见的方法: (图片来源网络,侵删) 1、使用CSS的“display”属性 CSS的“display”属性可以用来控制元素的显示方式,我们可以将元素的“display”属性设置…

    2024年6月25日
    00
  • 说说如何建立单页网站链接。

    一、什么是单页网站? 单页网站,顾名思义,是指所有内容都展示在一个网页上的网站,与传统的多页网站相比,单页网站具有简洁明了、加载速度快、用户体验好等优点,由于其将所有内容集中在一个页面上,因此在功能扩…

    2024年7月17日
    00
  • 我来教你企业网页怎么做。

    企业网页制作教程视频,Dreamweaver网页制作教程 随着互联网的普及和发展,企业网站已经成为了企业展示形象、传播信息、开展业务的重要平台,学习如何制作一个专业的企业网站显得尤为重要,本文将为您介绍如何使用D…

    2024年7月26日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息