CSS-百分百布局
1、照片随着大小变化;
<div class="box2">
<p> //这里都是4个;
<img src="./wangjunkai.png" alt="">
</p>
</div> .box2{
width: %;
}
.box2 p{
width:%;
float: left;
}
.box2 p img{
width: %;
}
2、固比固布局(圣杯布局)
.box3{
width:%;
position: relative;
}
.box3 p:nth-child(){
position: absolute; //浮动
left: ; //到最上面
width:100px;
height:100px;
background: red;
}
.box3 p:nth-child(){
width: %;
height:100px;
background: green;
box-sizing:border-box;
padding: 100px; //点睛之笔
}
.box3 p:nth-child(){
width:100px;
height:100px;
background: red;
position: absolute; //浮动
right: ;
top:; //到最上面
}
喜欢的小伙伴可以关注下我的微信公众号"前端伪大叔"
CSS-百分百布局的更多相关文章
- css双飞翼布局
双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 用css进行布局
用css进行布局 一,开始布局的注意事项 1.作为最佳实践,应把html(内容)和css(显示)分离: 2.网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义) 二,构建 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
随机推荐
- Java操作符——i++ 和 ++i的区别
问题:前置自增和后置自增的区别 Code-后置自增 public class Test { public static void main(String[] args) { int a = 2; in ...
- 带事务管理的spring数据库动态切换
动态切换数据源理论知识 项目中我们经常会遇到多数据源的问题,尤其是数据同步或定时任务等项目更是如此:又例如:读写分离数据库配置的系统. 1.相信很多人都知道JDK代理,分静态代理和动态代理两种,同样的 ...
- iOS即时通讯之CocoaAsyncSocket源码解析三
原文 前言 本文实例Github地址:即时通讯的数据粘包.断包处理实例. 本文旨以实例的方式,使用CocoaAsyncSocket这个框架进行数据封包和拆包.来解决频繁的数据发送下,导致的数据粘包.以 ...
- Vue常见的框架
1. Element:一套为开发者,设计师和产品经理准备的基于Vue 2.0的桌面端组件库 地址:https://element.eleme.cn/#/zh-CN 2.iview:主要服务于PC界面的 ...
- 阶段3 3.SpringMVC·_06.异常处理及拦截器_6 SpringMVC拦截器之拦截器入门代码
创建拦截器 新建包 实现拦截器的接口 接口中没有强制实现里面的方法.jdk1.8的特性.接口中已经实现了方法 这就是相当于实现了这个接口.方法已经全帮你实现过了. 如果想去写新的实现方法.Ctrl+o ...
- JavaScript基础之数组常用方法
目录 JS 数组常用API 常用属性 常用方法 常见方法语法解释 from方法 isArray concat every fill filter find forEach indexOf join k ...
- 【LeetCode】打家劫舍系列(I、II、III)
打家劫舍(House Robber)是LeetCode上比较典型的一个题目,涉及三道题,主要解题思想是动态规划,将三道题依次记录如下: (一)打家劫舍 题目等级:198.House Robber( ...
- 【Linux开发】linux设备驱动归纳总结(四):3.抢占和上下文切换
linux设备驱动归纳总结(四):3.抢占和上下文切换 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- Web Service简介与开发实例
简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的 ...
- MSF魔鬼训练营-5.3 MS08-067安全漏洞实战
msf > search ms08_067 Matching Modules ================ Name D ...