CSS基础 水平居中案例
html结构
<body>
<div class="father">
<div class="son"></div>
</div>
</body> CSS结构
<style>
.father{
position: relative;
width: 400px;
height: 300px;
background-color: pink;
}
.son{
position: absolute;
top:0;
left: 50%; /*相对父元素的50% ，margin-left同理*/
transform: translateX(-50%); /*相对自己宽度回走50%*/
width: 100px;
height: 50px;
background-color: blue;
}
</style>
这样无论是父盒子还是子盒子增大或者缩小，子盒子都是居中的
CSS基础 水平居中案例的更多相关文章
- CSS基础 实战案例 模拟小米官方导航栏
效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li> ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS基础--常用样式
一.背景相关 背景颜色 background-color :颜色名称/rgb值/十六进制值 背景图片 background-image :url('') 背景图片平铺方式 background-rep ...
- CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- CSS基础入门
css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...
- 两天学会css基础（二）
接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
随机推荐
- vue-cli 如何配置assetsPublicPath； vue.config.js如何更改assetsPublicPath配置；
问题: vue项目完成打包上线的时候遇到静态资源找不到的问题,网上很多解决办法都是基于vue-cli 2.x 来解决的,但从vue-cli 3.0以后,便舍弃了配置文件夹(便没有了config这个文件 ...
- CSS3新增特性\HTML标签类型
RGBA:透明度 作用: 设置透明度(R G B A) opacity:不透明度 文字也会被设置不透明度 圆角 border-radius:圆角{左上角,右上角.. ...
- vue-cli2嵌入html
1.使用iframe <!-- 相对路径/绝对路径 --> <iframe src="../../../static/zsw.html"></ifra ...
- Reactor之发射器（Flux、Mono）转换操作函数
数据合并函数 由于业务需求有的时候需要将多个数据源进行合并,Reactor提供了concat方法和merge方法: concat public static <T> Flux<T&g ...
- Nginx区分PC和手机
目录 一.简介 二.配置 nginx识别手机端跳转到wap pc端跳转移动端 一.简介 有时候需要当手机访问PC站页面时自动跳转到对应的手机站页面. 二.配置 nginx识别手机端跳转到wap 即手机 ...
- 0RAYS元旦招新赛
一共有4道pwn题,题目不算难,但是挺考验调试能力的. pie 一个main函数就四次溢出... 第一次leak canary,第二次leak libc,第三次直接覆盖返回地址为one_gadgets ...
- 对Spring IOC容器的思考
最近在看Spring5的视频教学,学到了IOC容器这块,对IOC有些浅薄的理解,分享一二:有错误之处,还请大佬指出 IOC(Inversion of Control 控制反转),是面向对象编程中的一种 ...
- CF716A Crazy Computer 题解
Content 有一个电脑,如果过了 \(c\) 秒之后还没有任何打字符的操作,就把屏幕上面所有的字符清空.现在,给定 \(n\) 次打字符的时间 \(t_1,t_2,...,t_n\),求最后屏幕剩 ...
- 洛谷八月月赛 II T1 题解
Content 在大小为 \(n\) 的数字三角形中,第 \(i\) 行包含有 \(i\) 个数字,数字从上到下,从左到右依次排列为 \(1,2,3,\dots\). 设第 \(i\) 行第 \(j\ ...
- TFTP协议介绍-python实现tftp客户端
1. TFTP协议介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议) 是TCP/IP协议族中的一个用来在客户端与服务器之间进行简单文件传输的协议 特点: ...