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

宽(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

相关推荐

  • 关于css内联样式的语法是什么。

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

    2024年7月11日
    00
  • css涉及的英语单词!

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

    2018年4月28日
    0366
  • 小编教你discuz怎么修改模板。

    Discuz是一款非常流行的论坛程序,很多网站都使用它来搭建论坛,如果你想要修改Discuz的源代码,首先需要了解一些基本的HTML和PHP知识,以及对文件系统的基本操作,下面我们就来详细介绍如何修改Discuz的源代码,特…

    2024年6月16日
    00
  • 一个成熟的前端开发者都需要哪些知识。

    首先,成为一名成熟的开发者,首先必是一位有基础的开发。 所以最基本的一些HTML、CSS、JavaScript这些基础的语法,就不详细说了。 扎实的JavaScript基础 在前端开发里,最讲究的还是在JS里,基础的语法,能运用很…

    2022年7月4日 建站资讯
    0174
  • 我来说说html如何使图片变园。

    在HTML中,我们可以使用CSS样式来使图片变为圆形,以下是详细的技术教学: (图片来源网络,侵删) 1、我们需要在HTML文件中插入一张图片,可以使用<img>标签来实现这一点。 <!DOCTYPE html> <html&…

    2024年6月26日
    00
  • 小编分享怎么查看css冲突,css冲突怎么解决的问题。

    CSS冲突是指在网页开发过程中,由于多个样式表或者样式规则的相互影响,导致页面元素的样式表现不一致的现象,这种现象可能会使得页面的布局和设计变得混乱,影响用户体验,本文将介绍如何查看和解决CSS冲突,以及…

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

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

    2024年7月26日
    00
  • DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

    CSS边框虚线 这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思。 边为虚线边框 border:1px dashed #000; 黑色虚线边框实例…

    2017年11月17日
    0235

联系我们

QQ:951076433

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