技术标签: 盒子里面图片的位置怎么设置 div搜索框与按钮不在一行 css使两个盒子并列
一个盒子我们会分成下面几个部分:
1.通过width和height实现一个100*100px的盒子
2.为盒子设置边框
为元素设置边框必须指定三个样式
.box{
/*
使用width来设置盒子内容区的宽度
使用height来设置内容区的高度
* */
width: 100px;
height: 100px;
/*设置背景颜色*/
background-color: #bfa;
/*为元素设置边框必须指定三个样式
border-width:边框宽度
border-color:边框颜色
border-style:边框样式
* */
border-width:10px;
border-color:red;
border-style:solid;
}
*width和height只是设置盒子内容区的大小,盒子可见框的大小由内容区,内边距和边框共同决定
3.使用border-width可以分别指定四个边框的宽度(之间用空格隔开)
如果在border-width指定四个值,则四个值会按照顺时针方向赋值给上、右、下、左边框
如果指定三个值,则分别设置给上、左右、下
如果指定两个值,则分别设置给上下、左右
如果指定一个值,则四边全为该值
*border-color和border-style也有这样的使用方法
4.除了border-width,css中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
width也可以是color和style修改定边的颜色和样式
以下是魔改版:
*大部分浏览器中,边框的宽度和颜色都有默认值,而边框的样式的默认值都是none
所以样式一定要设置!
5.边框的简写属性
border
border-top border-right border-bottom border-left
可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效
小技巧:如果只想设置其中的三个边,可以把其中一个边设置为none
内边距(padding),指的是盒子的内容区和盒子边框之间的距离
一共有四个方向的内边距,可以通过:
padding-top
padding-right
padding-bottom
padding-left
来设置四个方向的内边距
内边距会影响盒子可见框的大小,元素的背景会延伸到内边距,像下面这样
在box盒子里面装一个box1盒子,方便对比
*盒子的大小由内容区,内边距和边框共同决定
外边距指的是当前盒子与其他盒子之间的距离
它不会影响可见框的大小,而是会影响盒子的位置
盒子有四个方向的外边距:
margin-top
margin-right
margin-bottom
margin-left
由于页面中的元素都是靠左靠上摆放的
所以当我们设置上和左外边距时,会导致盒子自身的位置发生改变
而如果是设置右和下外边距会改变其他盒子的位置
从上图可以看出设置右和下是没有效果的
再加一个盒子查看就能明显看到下面的盒子被挤下去了
外边距也可以是一个负值
如果外边距是负值,则元素会向反方向移动
margin还可以设置为auto,auto一般只设置给水平方向的margin
如果只指定左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto,则外边距默认就是0
如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值,
就可以使元素自动在父元素中居中
所以可以将左右外边距设置为auto,以使子元素在父元素中水平居中
外边距的简写属性margin,可以同时设置四方向的外边距,规则和padding一样
在网页中相邻的垂直方向的外边距会发生外边距的重叠
以下红色框是我特地框出来对比的,不属于css的内容
浏览器为了在页面没有样式时,也可以有一个比较好的显示效果,
所以很多的元素都设置了一些默认的margin和padding,
这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前将需要的浏览器中默认的margin和padding统统去掉
1.内联元素不能设置width和height
2.可以设置水平方向的内边距,可以设置垂直方向的外边距,但不会影响页面的布局
3.内联元素可以设置边框,但是垂直的边框不会影响到页面的布局
4.内联元素支持水平方向的外边距,不支持垂直外边距
5.内联元素外边距不会重叠,而是求和
将一个内联元素变成块元素
通过display样式可以修改元素的类型
可选值:
inline:可以将一个元素作为内联元素显示
block:可以将一个元素设置块元素选择
inline-block:将一个元素转换为行内块元素
* 可以将一个元素既有行内元素的特点又有块元素的特点
* 既可以设置宽高,又不会独占一行,类似imgs
none:不显示元素,并且元素不会在页面中继续占有位置
block和inline-block的区别:
visibility
可以用来设置元素的隐藏和显示的状态
可选值:
* visible 默认值,元素默认会在页面显示
* hidden 元素会隐藏不显示
*使用visibility:hidden;隐藏的元素虽然不会在页面中显示,但是它的位置会依然保持
对比一下display:none
子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示
超出父元素的内容,我们称为溢出的内容
父元素默认是溢出内容,在父元素外边显示
通过overflow可以设置父元素如何溢出内容
可选值:
* visible,默认值,不会对溢出内容做处理,元素会在父元素以外的位置显示
* hidden,溢出的内容,会被修剪,不会显示
* scroll,会为父元素添加滚动条,通过拖动滚动条来查看完整内容,该属性不论内容是否溢 出,都会添加水平和垂直的双方向滚动条
* auto,会根据需求自动添加滚动条,需要垂直就垂直,要水平就水平,都不需要就不加
文档流处在网页的最底层,它表示的是一个页面的位置
我们所创建的元素默认都处在文档流中
元素在文档流中的特点:
块元素
1.块元素在文档流中独占一行,块元素会自上而下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
*当元素的宽度的值为auto时,此时指定内边距不会影响可见框的大小
而是会自动修改宽度,以适应内边距
内联元素
1.内联元素在文档流中只占自身的大小,会默认从左到右排列
如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右
2.在文档流中,内联元素的宽度和高度默认都被内容撑开
块元素在文档流中默认垂直排列,所以这三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流
使用float来使元素浮动,从而脱离文档流
可选值:
none,默认值,元素默认在文档流中排列
left,元素会自动脱离文档流,向页面的左侧浮动
right,元素会立即脱离文档流,向页面的右侧移动
当为一个元素浮动以后(float属性是一个非none的值)
元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动
元素浮动以后,会尽量向页面的左上或者右上漂浮
直到遇到父元素的边框或者其他浮动元素
如果浮动元素上边没有一个浮动的块元素,则浮动元素不会超过块元素
浮动元素不会超过它上边的兄弟元素,最多一边齐
浮动的元素不会盖住文字,文字会自动环绕在浮动元素周围,可以通过浮动来设置文字环绕图片效果
在文档流中,子元素的宽度默认占父元素的全部
当元素设置浮动以后,会完全脱离文档流
块元素脱离文档流以后高度和宽度都被内容撑开
内联元素脱离文档流以后会变成块元素
文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势,分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括:FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大
文章浏览阅读1.1k次,点赞2次,收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的:估计模块间的delay,确保写的代码的timing 综合能给到多少HZ,以满足需求!_基4布斯算法代码
文章浏览阅读3.3k次,点赞3次,收藏5次。OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版
文章浏览阅读2.2k次。USACO自1992年举办,到目前为止已经举办了27届,目的是为了帮助美国信息学国家队选拔IOI的队员,目前逐渐发展为全球热门的线上赛事,成为美国大学申请条件下,含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学,越来越多的学生进入了康奈尔,麻省理工,普林斯顿,哈佛和耶鲁等大学,这些同学的共同点是他们都参加了美国计算机科学竞赛(USACO),并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学,高三学生也可以参加12月的第_usaco可以多次提交吗
文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程
文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0
文章浏览阅读2.8k次,点赞3次,收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画(无顶点位移),整个mesh由4个顶点构成。实现了水面效果(左图),不动代码稍微修改下参数和贴图可以实现岩浆效果(右图)。有要思路是1,uv按时间去做正弦波移动2,在1的基础上加个凹凸图混合uv3,在1、2的基础上加个水流方向4,加上对雾效的支持,如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader
文章浏览阅读5k次。广义线性模型是线性模型的扩展,它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为:其中g(μY)是条件均值的函数(称为连接函数)。另外,你可放松Y为正态分布的假设,改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后,便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下,线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是,有时候我们要进行非正态因变量的分析,例如:(1)类别型.._广义线性回归模型
文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点,网页的风格主题也很全面:如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题,学生、新手可参考下方页面的布局和设计和HTML源码(有用点赞△) 一套A+的网_垃圾分类网页设计目标怎么写
文章浏览阅读614次,点赞7次,收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录
文章浏览阅读1.5k次。本文为转载,原博客地址:http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出,BRIEF是对已检测到的特征点进行描述,它是一种二进制编码的描述子,摈弃了利用区域灰度..._breif description calculation 特征点
文章浏览阅读4.1k次,点赞21次,收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档,可以给应届毕业生提供格式撰写参考,也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文